.hud { display:flex; justify-content:center; align-items:center; gap:14px; font-weight:bold; font-size:1.2rem; margin-bottom:8px; flex-wrap:wrap; }
#stickers { font-size:1.6rem; letter-spacing:2px; max-width:60vw; }
.mini { font:inherit; font-size:1.05rem; font-weight:bold; padding:6px 14px; border-radius:999px; border:3px solid var(--c4); background:#fff; color:var(--c4); cursor:pointer; }

.scene { position:relative; max-width:720px; height:250px; margin:0 auto; border-radius:24px; overflow:hidden;
  border:4px solid var(--c2); background:linear-gradient(#8fd3ff,#e6f7ff 70%); }
.sun { position:absolute; right:14%; top:8px; font-size:2.6rem; }
.cloud { position:absolute; font-size:2.4rem; opacity:.9; animation:drift 30s linear infinite; }
.c1 { top:14px; left:10%; } .c2 { top:44px; left:55%; animation-duration:45s; }
@keyframes drift { 50% { transform:translateX(40px); } }
.bank { position:absolute; bottom:0; width:12%; height:110px; background:linear-gradient(#7ed36a,#5aa84a); }
.bank.left { left:0; border-top-right-radius:30px; } .bank.right { right:0; border-top-left-radius:30px; }
.water { position:absolute; left:12%; right:12%; bottom:0; height:92px;
  background:repeating-linear-gradient(100deg,#4fb3ff 0 26px,#6cc2ff 26px 52px); background-size:104px 100%;
  animation:flow 4s linear infinite; }
@keyframes flow { to { background-position:104px 0; } }

.plank { position:absolute; bottom:98px; width:11%; height:16px; transform:translateX(-50%); border-radius:4px;
  border:2px dashed rgba(120,80,30,.45); background:rgba(255,255,255,.15); }
.plank.current { animation:throb 1s infinite; border-color:var(--c1); }
.plank.built { border:2px solid #7a4b17; background:repeating-linear-gradient(90deg,#c88a43 0 14px,#b57830 14px 16px); animation:drop .4s ease-out; }
.plank.fall { border:2px solid #7a4b17; background:#c88a43; animation:sink .8s ease-in forwards; }
@keyframes drop { from { transform:translate(-50%,-40px); opacity:0; } to { transform:translate(-50%,0); opacity:1; } }
@keyframes sink { 0%,20% { transform:translate(-50%,0) rotate(0); } 100% { transform:translate(-50%,70px) rotate(25deg); opacity:0; } }
@keyframes throb { 50% { box-shadow:0 0 0 6px rgba(255,107,107,.35); } }

.hero, .treasure { position:absolute; bottom:108px; transform:translateX(-50%); font-size:3rem; line-height:1; }
.hero { left:6%; transition:left .7s ease-in-out; z-index:2; }
.hero.hop { animation:hop .7s ease-in-out; }
.hero.shake { animation:shakeh .5s; }
.hero.cheer { animation:cheer .6s 3; }
.treasure { left:94%; font-size:2.6rem; }
@keyframes hop { 40% { transform:translate(-50%,-34px); } }
@keyframes shakeh { 25% { transform:translateX(-60%) rotate(-12deg); } 75% { transform:translateX(-40%) rotate(12deg); } }
@keyframes cheer { 50% { transform:translate(-50%,-26px) scale(1.15); } }

.quest { max-width:720px; margin:14px auto 0; }
.sum { font-size:clamp(2.6rem,10vw,4.4rem); font-weight:bold; color:var(--c1); line-height:1.1; }
.answer { min-width:140px; display:inline-block; margin:8px 0; padding:2px 24px; font-size:clamp(2.4rem,9vw,3.6rem); font-weight:bold;
  border-radius:16px; border:4px dashed var(--c4); color:var(--c4); background:#fff; min-height:1.3em; }
.answer.ok { border-color:#1b9e5a; border-style:solid; color:#1b9e5a; }
.quest-btns { display:flex; gap:10px; justify-content:center; margin-bottom:6px; }

.hintbox { max-width:720px; margin:6px auto; padding:8px 10px; background:#fffbe6; border:3px dashed var(--c3); border-radius:16px;
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; font-weight:bold; font-size:1.8rem; }
.hintbox[hidden] { display:none; }
.hgroup { display:flex; flex-wrap:wrap; gap:2px; align-items:flex-end; justify-content:center; max-width:42%; }
.hgroup > * { position:relative; zoom:.5; }

.keys { display:grid; grid-template-columns:repeat(3,76px); gap:10px; justify-content:center; margin:8px auto 4px; }
.key { font:inherit; font-size:1.9rem; font-weight:bold; height:62px; border-radius:16px; border:0; background:var(--c2); color:#fff;
  box-shadow:0 4px 0 #2a8f87; cursor:pointer; touch-action:manipulation; }
.key:active { transform:translateY(2px); box-shadow:0 2px 0 #2a8f87; }
.key.go { background:#1b9e5a; box-shadow:0 4px 0 #14773f; }
.key.del { background:var(--c4); box-shadow:0 4px 0 #4b44c4; }

.overlay { position:fixed; inset:0; z-index:40; background:rgba(40,30,80,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.overlay[hidden] { display:none; }
.panel { background:#fff8e7; border:5px solid var(--c3); border-radius:28px; padding:20px; max-width:480px; width:100%; }
.panel h2 { margin:0 0 10px; }
.chars { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.char { font-size:3.4rem; line-height:1; padding:10px 14px; border-radius:20px; border:4px solid var(--c2); background:#fff; cursor:pointer; touch-action:manipulation; }
.char:active { transform:scale(.94); }
.story { opacity:.8; }
.big-hero, .new-sticker { font-size:4.5rem; line-height:1.1; }
.big-hero { animation:cheer .6s 3; display:inline-block; }