* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body { height:100%; overflow:hidden; background:#050505; }
body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:#cfc6b8;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}

canvas { display:block; }

/* ---------- overlays ---------- */
.overlay {
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse 60% 45% at 50% 28%, rgba(255,190,110,0.10), rgba(0,0,0,0) 60%), #050505;
  transition: opacity .6s ease;
}
.overlay.fadeOut { opacity:0; pointer-events:none; }
.hidden { display:none !important; }

.startInner { text-align:center; padding:24px; max-width:560px; }

h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(26px, 6.5vw, 58px);
  letter-spacing: .22em;
  margin-left:.22em; /* optical centering for tracking */
  white-space: nowrap;
  color:#f0e6d2;
  text-shadow: 0 0 24px rgba(255,190,110,.35), 0 0 90px rgba(255,190,110,.15);
  animation: flickerTitle 5s infinite;
}
.winTitle { animation:none; text-shadow: 0 0 30px rgba(255,255,255,.6); color:#fff; }

@keyframes flickerTitle {
  0%,7%,9%,100% { opacity:1; }
  8% { opacity:.35; }
  42%,44% { opacity:1; }
  43% { opacity:.55; }
}

.sub { margin-top:14px; font-size:14px; line-height:1.7; color:#9a917f; }
.how { margin-top:18px; font-size:12px; line-height:1.8; color:#6f6858; }
.ctrls { margin-top:22px; font-size:11px; color:#4d483d; letter-spacing:.08em; }

/* hanging bulb art */
.bulbArt { height:110px; position:relative; margin-bottom:6px; }
.bulbArt .string {
  position:absolute; left:50%; top:0; width:2px; height:74px;
  background:#3a352c; transform-origin:top center;
  animation: sway 3.4s ease-in-out infinite;
}
.bulbArt .glass {
  position:absolute; left:50%; top:70px; width:26px; height:26px; margin-left:-13px;
  border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #fff3d0 0%, #ffcf8a 45%, #8a6a3a 100%);
  box-shadow: 0 0 22px 8px rgba(255,200,120,.45), 0 0 70px 30px rgba(255,190,110,.12);
  transform-origin: 13px -70px;
  animation: sway 3.4s ease-in-out infinite, flickerTitle 4s infinite;
}
@keyframes sway {
  0%,100% { transform: rotate(4deg); }
  50% { transform: rotate(-4deg); }
}

/* difficulty buttons */
.diffRow { display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.diffBtn {
  background:rgba(255,205,130,.03);
  border:1px solid #3a3428;
  color:#cfc6b8;
  padding:16px 18px; min-width:140px;
  cursor:pointer;
  font-family:inherit;
  display:flex; flex-direction:column; gap:6px; align-items:center;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .1s;
}
.diffBtn:hover, .diffBtn:focus-visible {
  border-color:#c79a55;
  background:rgba(255,205,130,.08);
  box-shadow:0 0 22px rgba(255,190,110,.15);
  outline:none;
}
.diffBtn:active { transform:scale(.97); }
.dName { font-size:16px; letter-spacing:.3em; margin-left:.3em; color:#f0e6d2; }
.dDesc { font-size:10px; color:#7a7263; }

/* ---------- HUD ---------- */
#hud { position:fixed; inset:0; z-index:10; pointer-events:none; }
#roundTag {
  position:absolute; top:14px; left:16px;
  font-size:12px; letter-spacing:.25em; color:#8f8672;
  text-shadow:0 0 8px rgba(0,0,0,.9);
}
#hint {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-size:12px; letter-spacing:.12em; color:#c7ba9d;
  text-shadow:0 0 10px rgba(0,0,0,.9);
  text-align:center; padding:0 60px 0 110px; max-width:100%;
  transition:opacity .4s;
}

/* ---------- whiteout ---------- */
#whiteout {
  position:fixed; inset:0; z-index:15; background:#fff;
  opacity:0; pointer-events:none; transition:opacity 2.2s ease-in;
}

@media (max-width:520px){
  .diffRow { flex-direction:column; align-items:stretch; }
  .diffBtn { min-width:0; }
  #hint { padding:0 10px; top:36px; }
}

@media (prefers-reduced-motion: reduce){
  .bulbArt .string, .bulbArt .glass, h1 { animation:none; }
}