.target { font-size:clamp(4rem,16vw,7rem); font-weight:bold; line-height:1; color:var(--c1); }
.stars { font-size:1.5rem; vertical-align:middle; }
.word { font-size:1.6rem; text-transform:capitalize; margin:4px 0 16px; }

.m { position:absolute; width:12px; height:90px; border-radius:3px;
  background:linear-gradient(90deg,#e8b86d,#f5d08f 50%,#d9a354); box-shadow:0 1px 2px rgba(0,0,0,.3); }
.m::before { content:""; position:absolute; left:-1px; top:-6px; width:14px; height:17px; border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 35% 30%,#ff8a80,#d32f2f 70%); }
.one { position:relative; width:14px; height:100px; flex:none; }
.one .m { left:1px; top:8px; }
.ten { position:relative; width:70px; height:100px; flex:none; }
.ten .m { top:8px; left:29px; transform-origin:50% 55px; }
.ten .band { position:absolute; left:11px; top:48px; width:48px; height:18px; border-radius:6px;
  background:repeating-linear-gradient(90deg,var(--c2) 0 10px,#3ab5ab 10px 20px); border:2px solid #2a8f87; }

.tray { display:flex; justify-content:center; gap:32px; margin-bottom:16px; }
.tray-item { display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:bold; }
.src { cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; padding:6px 10px;
  background:#fff; border:3px dashed var(--c4); border-radius:16px; }

.zones { display:flex; gap:16px; max-width:900px; margin:0 auto; justify-content:center; flex-wrap:wrap; }
.zone { flex:1 1 300px; min-height:190px; background:#fff; border:4px solid var(--c3); border-radius:24px; padding:8px 12px; }
.zone.over { background:#fffbe6; border-color:var(--c1); }
.zone h2 { margin:4px 0 8px; color:var(--c4); }
.items { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:flex-end; min-height:110px; }
.items > * { cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none; }


.msg { font-size:1.5rem; font-weight:bold; min-height:2em; margin:16px 0 4px; }
.msg.good { color:#1b9e5a; } .msg.hint { color:var(--c1); }
.controls { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.btn { font:inherit; font-size:1.3rem; font-weight:bold; padding:12px 22px; border-radius:18px; border:0;
  background:var(--c2); color:#fff; box-shadow:0 4px 0 #2a8f87; cursor:pointer; }
.btn.alt { background:var(--c4); box-shadow:0 4px 0 #4b44c4; }
.btn:active { transform:translateY(2px); }
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)} }
.pop { animation:pop .5s; }

/* Grumpy Gus */
.gus { position:fixed; right:12px; bottom:0; z-index:50; display:flex; flex-direction:column; align-items:flex-end;
  transform:translateY(130%); transition:transform .35s cubic-bezier(.3,1.6,.5,1); pointer-events:none; max-width:min(300px,80vw); }
.gus.show { transform:none; }
.gus .face { font-size:6rem; line-height:1; margin-right:8px; }
.gus.show .face { animation:shake .5s .3s 4; transform-origin:50% 90%; }
.bubble { background:#fff; border:3px solid var(--c1); border-radius:18px; padding:10px 14px; font-weight:bold;
  font-size:1.2rem; text-align:left; position:relative; margin-bottom:6px; color:#b71c1c; }
.bubble::after { content:""; position:absolute; right:40px; bottom:-14px; border:10px solid transparent;
  border-top-color:var(--c1); border-bottom:0; }
@keyframes shake { 0%,100%{transform:rotate(0) scale(1.1)} 25%{transform:rotate(-12deg) scale(1.15)} 75%{transform:rotate(12deg) scale(1.15)} }

/* Happy kisser (left corner, mirrors Gus) */
.kiss { position:fixed; left:12px; bottom:0; z-index:50; display:flex; flex-direction:column; align-items:flex-start;
  transform:translateY(130%); transition:transform .35s cubic-bezier(.3,1.6,.5,1); pointer-events:none; max-width:min(300px,80vw); }
.kiss.show { transform:none; }
.kiss .face { font-size:6rem; line-height:1; margin-left:8px; }
.kiss.show .face { animation:smooch .6s .3s 3; transform-origin:50% 90%; }
.kiss .bubble { border-color:#ec407a; color:#ad1457; }
.kiss .bubble::after { right:auto; left:40px; border-top-color:#ec407a; }
.hearts { position:relative; width:100%; height:0; }
.hearts span { position:absolute; bottom:-10px; font-size:2rem; opacity:0; }
.kiss.show .hearts span { animation:floatup 1.8s ease-out both; }
@keyframes smooch { 0%,100%{transform:scale(1.05) rotate(0)} 50%{transform:scale(1.25) rotate(8deg)} }
@keyframes floatup { 0%{opacity:0; transform:translateY(0) scale(.6)} 20%{opacity:1} 100%{opacity:0; transform:translateY(-140px) scale(1.2)} }

/* tap-to-move: the stick in hand */
.items > *, .src { transition:transform .12s; }
.items > .sel { transform:translateY(-8px) scale(1.12); filter:drop-shadow(0 0 6px var(--c1)) drop-shadow(0 0 2px var(--c1)); }
.src.sel { border-style:solid; border-color:var(--c1); background:#fff3f3; transform:translateY(-4px); }