* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; background:#2a0a14; overflow:hidden; }
body {
  font-family:"Trebuchet MS","Comic Sans MS","Chalkboard SE",Verdana,sans-serif;
  color:#fff8e7; user-select:none; -webkit-user-select:none; touch-action:none;
}
#stage { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#2a0a14; }
#game { background:#000; image-rendering:auto; }
#ui { position:absolute; inset:0; pointer-events:none; }
#ui .screen, #ui .panel, #ui button { pointer-events:auto; }
#ui .screen { touch-action:pan-y; }
#ui .card { touch-action:pan-y; }

/* ---------- generic screens ---------- */
.screen {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:44px 24px 24px; text-align:center; z-index:20; overflow-y:auto;
}
.screen.dim { background:rgba(30,6,14,.72); }
h1.logo {
  font-size:52px; line-height:1.05; color:#ffd75e; letter-spacing:1px;
  text-shadow:0 3px 0 #7a1f2b, 0 6px 14px rgba(0,0,0,.5); margin-bottom:6px;
}
.tagline { color:#ffe9a8; font-size:17px; margin-bottom:18px; text-shadow:0 2px 4px rgba(0,0,0,.6); }
.btn {
  display:block; min-width:230px; margin:8px auto; padding:14px 26px; font-size:21px; font-weight:bold;
  font-family:inherit; color:#4a0e1c; background:linear-gradient(#ffe27a,#f5b93c);
  border:3px solid #7a4a12; border-radius:18px; cursor:pointer;
  box-shadow:0 4px 0 #7a4a12, 0 6px 12px rgba(0,0,0,.4);
}
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 #7a4a12; }
.btn.secondary { background:linear-gradient(#bfe3b0,#7fbf6a); border-color:#2f5c22; color:#12300c; box-shadow:0 4px 0 #2f5c22, 0 6px 12px rgba(0,0,0,.4); }
.btn.ghost { background:rgba(255,255,255,.12); color:#ffe9a8; border-color:#ffe9a8; box-shadow:none; font-size:16px; min-width:0; padding:10px 18px; }

/* ---------- HUD ---------- */
#hud { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:8px; padding:8px 10px; z-index:10; pointer-events:none; }
#hud .pill {
  background:rgba(40,8,18,.82); border:2px solid #ffd75e; border-radius:999px; color:#ffe9a8;
  font-size:15px; font-weight:bold; padding:5px 12px; display:flex; align-items:center; gap:6px; pointer-events:auto;
}
#hud .spacer { flex:1; }
#hud .iconbtn {
  pointer-events:auto; width:44px; height:44px; border-radius:14px; font-size:20px;
  background:rgba(40,8,18,.82); border:2px solid #ffd75e; color:#ffe9a8; cursor:pointer;
}
#objective {
  position:absolute; top:58px; left:10px; right:10px; z-index:10; pointer-events:none;
  background:rgba(40,8,18,.78); border:2px solid #7fbf6a; border-radius:14px; padding:7px 12px;
  font-size:14px; color:#eaf7df; display:none;
}
#objective b { color:#ffd75e; }
#prompt {
  position:absolute; left:50%; transform:translateX(-50%); bottom:150px; z-index:11; display:none;
  background:#ffd75e; color:#4a0e1c; font-weight:bold; font-size:17px; padding:10px 20px;
  border-radius:999px; border:3px solid #7a4a12; box-shadow:0 4px 10px rgba(0,0,0,.4);
  animation:bob 1s ease-in-out infinite;
}
@keyframes bob { 50% { transform:translateX(-50%) translateY(-6px); } }

/* ---------- dialogue ---------- */
#dialog {
  /* NOTE: no display:none here — the dialog element is created on demand by
     renderDialog() and removed when the conversation ends. Hiding it with
     display:none soft-locked the game (invisible modal ate all input). */
  position:absolute; left:16px; right:16px; bottom:150px; z-index:30;
  background:#fff8e7; color:#3a1520; border:4px solid #7a1f2b; border-radius:18px; padding:14px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
#dialog .who { font-weight:bold; color:#7a1f2b; font-size:15px; margin-bottom:6px; }
#dialog .line { font-size:17px; line-height:1.45; min-height:48px; }
#dialog .next { margin-top:10px; text-align:right; }
#dialog .next button {
  font-family:inherit; font-size:16px; font-weight:bold; padding:8px 22px; border-radius:12px;
  background:#7a1f2b; color:#ffe9a8; border:none; cursor:pointer;
}

/* ---------- toast ---------- */
#toast {
  position:absolute; top:120px; left:50%; transform:translateX(-50%) scale(.9); z-index:40;
  background:linear-gradient(#ffe27a,#f5b93c); color:#4a0e1c; border:3px solid #7a4a12; border-radius:18px;
  padding:14px 22px; font-size:18px; font-weight:bold; text-align:center; opacity:0; transition:all .3s;
  box-shadow:0 8px 24px rgba(0,0,0,.5); max-width:86%;
}
#toast.show { opacity:1; transform:translateX(-50%) scale(1); }

/* ---------- panels (journal/shop/settings/parents/map) ---------- */
.panel {
  position:absolute; inset:0; z-index:25; display:flex; align-items:center; justify-content:center;
  background:rgba(30,6,14,.78); padding:18px;
}
.card {
  background:#fff8e7; color:#3a1520; border:4px solid #7a1f2b; border-radius:20px;
  width:100%; max-width:420px; max-height:88%; overflow-y:auto; padding:18px; text-align:left;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.card h2 { color:#7a1f2b; font-size:24px; margin-bottom:10px; text-align:center; }
.card h3 { color:#7a1f2b; font-size:17px; margin:12px 0 4px; }
.card p, .card li { font-size:15px; line-height:1.5; }
.card ul { padding-left:20px; }
.mission { border:2px solid #d9b23c; border-radius:12px; padding:8px 10px; margin:8px 0; background:#fffdf4; }
.mission.done { border-color:#7fbf6a; background:#f2faec; }
.mission .mt { font-weight:bold; font-size:15px; }
.mission.done .mt::after { content:" ⭐"; }
.mission .mo { font-size:13.5px; color:#5c3a28; }
.mission.lockedm { opacity:.55; }
.shopitem { display:flex; align-items:center; gap:10px; border:2px solid #d9b23c; border-radius:12px; padding:8px; margin:8px 0; background:#fffdf4; }
.shopitem .grow { flex:1; }
.shopitem .nm { font-weight:bold; font-size:15px; }
.shopitem .pr { font-size:14px; color:#7a5a12; }
.buybtn { font-family:inherit; font-weight:bold; font-size:15px; padding:8px 16px; border-radius:12px; border:2px solid #7a4a12; background:#ffd75e; color:#4a0e1c; cursor:pointer; }
.buybtn:disabled { opacity:.45; cursor:default; }
.closebtn { display:block; margin:14px auto 0; font-family:inherit; font-size:17px; font-weight:bold; padding:10px 30px; border-radius:14px; background:#7a1f2b; color:#ffe9a8; border:none; cursor:pointer; }
.worldcard { border:3px solid #d9b23c; border-radius:16px; padding:12px; margin:10px 0; background:#fffdf4; display:flex; gap:12px; align-items:center; }
.worldcard.locked { opacity:.6; border-color:#999; }
.worldcard .wn { font-weight:bold; font-size:17px; color:#7a1f2b; }
.worldcard .wd { font-size:13.5px; color:#5c3a28; }
.worldcard .wemoji { font-size:34px; }
.gorow { text-align:center; }

/* ---------- touch controls ---------- */
#touch { position:absolute; inset:0; pointer-events:none; display:none; z-index:15; }
#touch.on { display:block; }
.tbtns { position:absolute; bottom:calc(18px + env(safe-area-inset-bottom)); display:flex; gap:14px; }
.tbtns.left { left:16px; }
.tbtns.right { right:16px; }
.tbtns button {
  pointer-events:auto; width:74px; height:74px; border-radius:50%; font-size:28px;
  background:rgba(255,215,94,.28); border:3px solid rgba(255,215,94,.85); color:#ffe9a8;
  backdrop-filter:blur(2px);
}
.tbtns button:active { background:rgba(255,215,94,.55); }
#btnAct { border-color:#7fbf6a; color:#eaf7df; background:rgba(127,191,106,.30); }

.bigtext .card p, .bigtext .card li, .bigtext #dialog .line { font-size:19px; }

/* ---------- tap feedback (bindTap adds .pressed while a press is held) ---------- */
button.pressed { filter:brightness(1.18); }
.btn.pressed { transform:translateY(3px); box-shadow:0 1px 0 #7a4a12; }
#hud .iconbtn:active, #hud .iconbtn.pressed { background:#ffd75e; color:#4a0e1c; transform:scale(.94); }
.buybtn:active, .buybtn.pressed { background:#ffe9a8; transform:scale(.95); }
.closebtn:active, .closebtn.pressed { filter:brightness(1.25); transform:scale(.97); }
#dialog .next button:active, #dialog .next button.pressed { filter:brightness(1.3); transform:scale(.96); }
.tbtns button.pressed { background:rgba(255,215,94,.55); }