/* Reset + basics */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; width:100%; overflow:hidden; font-family: Arial, Helvetica, sans-serif; background: linear-gradient(to top,#777,#888);}

/* Game container */
#game { position:relative; width:100%; height:100vh; overflow:hidden; }

/* Scenes / background */
#scene-root { position:relative; width:100%; height:100%; overflow:hidden; }
#background { position:absolute; top:0; left:0; width:200%; height:100%; background:transparent; overflow:hidden; pointer-events:none; z-index:0; }

/* background "buildings" style (generated dynamically) */
.bg-square { position:absolute; background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0)); opacity:1; }

/* ground placed lower third (user tweaked) */
#ground {
  position:absolute;
  top:75%;
  width:100%;
  height:34vh;
  background: linear-gradient(to bottom, #bbb, #999);
  z-index:0;
}

/* character */
#character {
  position:absolute;
  bottom:23vh; /* on top of ground */
  left:50%;
  transform:translateX(-50%);
  width:512px;
  height:512px;
  image-rendering: pixelated;
  pointer-events:none;
  z-index:4;
}

/* START screen (black) */
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:50; }
#start-screen { background: #000; color:#fff; flex-direction:column; gap:16px; }
#start-content { text-align:center; }
#start-btn {
  background:#fff; color:#000; border:0; padding:18px 36px; font-size:20px; cursor:pointer;
  border-radius:6px;
}
#start-note { color:#fff; margin-top:8px; font-size:14px; opacity:0.9; }
#preloader-status { color:#ccc; margin-top:12px; font-size:13px; }

/* fade overlay (for smooth transitions) */
.fade { position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:9999; transition: opacity 600ms ease; }

/* UI layer on top */
#ui-layer { position:absolute; inset:0; pointer-events:none; z-index:70; }

/* top text (scene titles) */
.top-text {
  position:absolute; top:18px; left:50%; transform:translateX(-50%); color:#000; font-weight:700; font-size:24px; text-align:center; z-index:71;
  pointer-events:auto;
}

/* counter under the top text */
#counter { top:54px; font-size:16px; color:#000; z-index:71; }

/* cursor layer used by scene 1 (net cursor) */
#cursor-layer { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:80; }

/* Dialogue UI */
.dialogue { position:absolute; left:50%; transform:translateX(-50%); bottom:12vh; width:60%; max-width:800px; background:rgba(255,255,255,0.95); border-radius:12px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,0.2); pointer-events:auto; z-index:85; }
.dialogue.hidden { display:none; }
#dialogue-text { color:#111; font-size:18px; margin-bottom:12px; }
#dialogue-choices { display:flex; gap:12px; flex-wrap:wrap; }
.choice-btn { background:#222; color:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; }
#dialogue-hint { margin-top:10px; color:#666; font-size:12px; }

/* small helper styles */
.hidden { display:none !important; }
.btn-inline { display:inline-block; padding:6px 10px; background:#111; color:#fff; cursor:pointer; border-radius:6px; }

/* typing input style for scene 5 */
.typing-input {
  width:250px;
  border:1px solid #bbb;
  padding:8px 10px;
  border-radius:8px;
  font-size:16px;
}

/* clickable orange dots in scene7 */
.orange-dot { position:absolute; width:28px; height:28px; border-radius:50%; background:rgba(255,165,0,0.85); z-index:990; cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events: auto; }

/* white line drawn to connect dots */
.paper-line { position:absolute; height:18px; background:#fff; border:grey solid 1px; transform-origin:left center; z-index:999; pointer-events:none; }

/* responsive tweaks */
@media (max-width:700px) {
  #start-note { font-size:12px; }
  #start-btn { padding:12px 20px; font-size:16px; }
  .dialogue { width:90%; }
}
/* Scene characters (like Wallace, bed, etc.) */