:root{
  --bg:#f6f9ff; --card:#ffffff; --ink:#213047; --muted:#667085;
  --red:#e5484d; --green:#1aa36f; --orange:#f59e0b; --blue:#3769f5; --purple:#7c3aed;
  --shadow:0 12px 30px rgba(31, 41, 55, .14);
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;background:radial-gradient(circle at top,#eaf1ff,var(--bg));color:var(--ink);}
#app{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.topbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 14px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid #e5e7eb}
.topbar h1{margin:0;font-size:clamp(20px,2.4vw,26px);line-height:1.15}.topbar p,#subtitle{display:none}.status{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.status div{background:#eef4ff;border:1px solid #dbe7ff;padding:5px 9px;border-radius:999px;font-size:14px;font-weight:800;white-space:nowrap}
main{flex:1;min-height:0;padding:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}
footer{display:none}.start-card,.modal-card,.level-card,.result-card{width:min(880px,100%);max-height:100%;overflow:auto;background:var(--card);border-radius:22px;padding:22px;box-shadow:var(--shadow);text-align:center}.badge-big{font-size:64px}.primary,.ghost,.danger{border:0;border-radius:14px;padding:10px 18px;margin:6px;font-size:17px;font-weight:800;cursor:pointer}.primary{background:linear-gradient(135deg,var(--blue),var(--purple));color:white}.ghost{background:#eef2ff;color:#243b80}.danger{background:#fee2e2;color:#991b1b}
.game-area{position:relative;width:min(1180px,100%);height:100%;max-height:calc(100dvh - 62px);background:linear-gradient(180deg,#fff,#f4f8ff);border:2px solid #dbe7ff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.hint{position:absolute;left:12px;top:10px;z-index:3;background:rgba(255,255,255,.86);border:1px solid #e5e7eb;border-radius:12px;padding:7px 10px;font-size:14px;font-weight:800}.bubble{position:absolute;min-width:88px;max-width:260px;padding:10px 14px;border-radius:999px;font-size:clamp(14px,1.7vw,17px);font-weight:900;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.12);cursor:pointer;user-select:none;transition:transform .12s, opacity .2s}.bubble:hover{transform:scale(1.05)}.bully{background:#ffe2e2;color:#961b1f;border:2px solid #ffb3b3}.friendly{background:#dcfce7;color:#116149;border:2px solid #99f6c9}.improvable{background:#fef3c7;color:#92400e;border:2px solid #fde68a}.neutral{background:#eef2f7;color:#475467;border:2px solid #d0d5dd}.pop{animation:pop .3s forwards}@keyframes pop{to{transform:scale(1.4) rotate(8deg);opacity:0}}.bottom-panel{position:absolute;left:0;right:0;bottom:0;padding:10px;background:rgba(255,255,255,.9);display:flex;justify-content:center;gap:10px;z-index:5}.drop-zones{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px;z-index:2}.zone{height:92px;border:3px dashed #c7d2fe;border-radius:16px;background:#fff9;display:flex;align-items:center;justify-content:center;font-weight:900;text-align:center}.zone[data-type="bully"]{border-color:#fca5a5}.zone[data-type="improvable"]{border-color:#fcd34d}.zone[data-type="friendly"]{border-color:#86efac}.converter{position:absolute;right:14px;top:92px;width:190px;height:220px;border-radius:24px;background:linear-gradient(180deg,#e0e7ff,#fff);border:4px solid #818cf8;display:flex;align-items:center;justify-content:center;text-align:center;font-size:24px;font-weight:900;color:#3730a3;box-shadow:var(--shadow);z-index:2;white-space:pre-line}.friendly-zone{position:absolute;left:14px;bottom:14px;width:240px;height:82px;border-radius:20px;border:3px dashed #86efac;background:#ecfdf5;display:flex;align-items:center;justify-content:center;font-weight:900;color:#047857;z-index:2}.toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(720px,86%);background:#111827;color:white;border-radius:16px;padding:12px 16px;font-weight:900;z-index:20;box-shadow:var(--shadow);text-align:center}.boss{position:absolute;right:26px;top:96px;font-size:80px;filter:drop-shadow(0 14px 20px rgba(0,0,0,.15))}.bar{position:absolute;left:16px;right:16px;top:48px;height:18px;background:#fee2e2;border-radius:999px;overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,#f97316,#ef4444);width:100%}.progress{position:absolute;left:16px;right:16px;top:74px;height:14px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,#34d399,#22c55e);width:100%}.reward{font-size:110px;animation:shine 1.2s ease-in-out infinite alternate}@keyframes shine{from{transform:scale(1)}to{transform:scale(1.08) rotate(2deg)}}
@media(max-width:720px){.topbar{padding:7px 10px;gap:6px}.status{gap:5px}.status div{font-size:12px;padding:4px 7px}.game-area{max-height:calc(100dvh - 58px);border-radius:18px}.hint{font-size:12px;padding:6px 8px}.converter{right:8px;top:78px;width:135px;height:170px;font-size:18px}.friendly-zone{left:8px;bottom:8px;width:170px;height:66px}.drop-zones{grid-template-columns:1fr;gap:6px;padding:6px}.zone{height:56px}.topbar h1{font-size:18px}.start-card,.modal-card,.level-card,.result-card{padding:16px;border-radius:18px}.badge-big{font-size:48px}.primary,.ghost,.danger{font-size:15px;padding:9px 14px}.boss{font-size:64px;right:14px;top:82px}}
@media(max-height:620px){.topbar{padding-top:5px;padding-bottom:5px}.topbar h1{font-size:18px}.status div{font-size:12px;padding:3px 7px}.game-area{max-height:calc(100dvh - 48px)}.hint{font-size:12px;padding:5px 7px}.zone{height:64px}.converter{top:70px;height:160px}.friendly-zone{height:62px}.boss{top:78px;font-size:60px}.bar{top:42px}.progress{top:66px}}

/* Level-specific animated mouse tools - v4 smoother cursor */
body.tool-cursor-active .game-area{cursor:none}
#toolCursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;transform:translate3d(-120px,-120px,0);transform-origin:14px 14px;will-change:transform;backface-visibility:hidden;contain:layout style paint;}
#toolCursor.hidden{display:none}
#toolCursor .tool-icon{display:block;font-size:34px;line-height:1;transform:translate3d(-7px,-7px,0) rotate(-6deg);will-change:transform;transition:transform .11s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 4px 7px rgba(0,0,0,.22));backface-visibility:hidden;}
#toolCursor.is-down .tool-icon{transform:translate3d(-7px,-7px,0) scale(.96)}
#toolCursor .tool-label{display:none}
#toolCursor .tool-effect{position:absolute;left:8px;top:8px;width:10px;height:10px;border-radius:999px;opacity:0;will-change:transform,opacity;}
#toolCursor.hammer-hit .tool-icon{animation:hammerHit .18s cubic-bezier(.2,.85,.15,1) both;}
#toolCursor.shield-block .tool-icon{animation:shieldBlock .20s cubic-bezier(.2,.85,.15,1) both;}
#toolCursor.claw-grab .tool-icon{animation:clawGrab .22s cubic-bezier(.2,.85,.15,1) both;}
#toolCursor.dragging .tool-icon{transform:translate3d(-7px,-7px,0) rotate(4deg) scale(.92);}
#toolCursor.scissors-snip .tool-icon{animation:scissorsSnip .22s steps(2,end) both;}
#toolCursor.water-spray .tool-icon{animation:waterSpray .20s cubic-bezier(.2,.85,.15,1) both;}
#toolCursor.shield-block .tool-effect{opacity:1;animation:shieldRing .26s ease-out;box-shadow:0 0 0 0 rgba(55,105,245,.45)}
#toolCursor.scissors-snip .tool-effect{opacity:1;animation:snipSpark .28s ease-out;background:#fbbf24;}
#toolCursor.water-spray .tool-effect{opacity:1;animation:sprayDrop .34s ease-out;background:#38bdf8;box-shadow:14px 2px 0 #7dd3fc,28px 7px 0 #bae6fd,42px 12px 0 #38bdf8;}
@keyframes hammerHit{0%{transform:translate3d(-8px,-10px,0) rotate(-20deg) scale(1.03)}55%{transform:translate3d(-3px,5px,0) rotate(19deg) scale(.98)}100%{transform:translate3d(-7px,-7px,0) rotate(-6deg) scale(1)}}
@keyframes shieldBlock{0%{transform:translate3d(-7px,-7px,0) scale(.96)}45%{transform:translate3d(-7px,-7px,0) scale(1.18)}100%{transform:translate3d(-7px,-7px,0) scale(1)}}
@keyframes clawGrab{0%{transform:translate3d(-7px,-7px,0) rotate(-6deg) scale(1)}45%{transform:translate3d(-7px,-7px,0) rotate(5deg) scale(.9)}100%{transform:translate3d(-7px,-7px,0) rotate(-4deg) scale(1)}}
@keyframes scissorsSnip{0%{transform:translate3d(-7px,-7px,0) rotate(-14deg) scale(1)}50%{transform:translate3d(-7px,-7px,0) rotate(14deg) scale(1.05)}100%{transform:translate3d(-7px,-7px,0) rotate(-6deg) scale(1)}}
@keyframes waterSpray{0%{transform:translate3d(-7px,-7px,0) rotate(-8deg)}50%{transform:translate3d(-11px,-7px,0) rotate(-1deg)}100%{transform:translate3d(-7px,-7px,0) rotate(-6deg)}}
@keyframes shieldRing{0%{transform:translate3d(-14px,-14px,0) scale(.25);box-shadow:0 0 0 0 rgba(55,105,245,.5)}100%{transform:translate3d(-14px,-14px,0) scale(3.2);box-shadow:0 0 0 5px rgba(55,105,245,0);opacity:0}}
@keyframes snipSpark{0%{transform:translate3d(0,0,0) scale(.35);opacity:1}100%{transform:translate3d(24px,-16px,0) scale(1.4);opacity:0}}
@keyframes sprayDrop{0%{transform:translate3d(8px,0,0) scale(.55);opacity:1}100%{transform:translate3d(58px,22px,0) scale(.82);opacity:0}}
.cursor-burst{position:fixed;z-index:9998;pointer-events:none;transform:translate(-50%,-50%);font-weight:1000;font-size:16px;padding:3px 8px;border-radius:999px;background:#111827;color:#fff;animation:cursorBurst .36s ease-out forwards;box-shadow:0 4px 10px rgba(0,0,0,.16)}
.cursor-burst.level-1{background:#92400e}.cursor-burst.level-2{background:#1d4ed8}.cursor-burst.level-3{background:#7c2d12}.cursor-burst.level-4{background:#be123c}.cursor-burst.level-5{background:#0284c7}
@keyframes cursorBurst{0%{opacity:0;transform:translate(-50%,-10%) scale(.75)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1.08)}}
.tool-tip{position:absolute;right:12px;top:10px;z-index:3;background:rgba(17,24,39,.82);color:white;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.12)}
@media (pointer:coarse){#toolCursor{display:none}body.tool-cursor-active .game-area{cursor:auto}.tool-tip{right:8px;font-size:12px}}
@media(max-width:720px){.tool-tip{top:42px;right:8px;font-size:12px;padding:5px 8px}}

/* v5 mobile-friendly tap mode for levels 3 and 4 */
.bubble.selected{outline:4px solid #2563eb;box-shadow:0 0 0 6px rgba(37,99,235,.18),0 12px 26px rgba(0,0,0,.16);transform:scale(1.07)}
.bubble.shake{animation:shake .24s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.bubble.to-converter{animation:toConverter .2s ease-in forwards}
@keyframes toConverter{to{transform:translate(80px,-20px) scale(.2) rotate(12deg);opacity:0}}
@media (pointer:coarse){
  .bubble{touch-action:manipulation;min-width:96px;padding:12px 16px;font-size:16px}
  .zone,.converter{touch-action:manipulation}
  .drop-zones{bottom:0;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
  .zone{height:72px;font-size:14px;padding:4px}
}
@media (pointer:coarse) and (max-width:720px){
  .drop-zones{grid-template-columns:repeat(3,1fr)}
  .zone{height:64px;font-size:12px;border-width:2px}
}

/* v7: 第2關點擊改善：加大橢圓形文字物件的實際可點擊區域，並避免移動中 click 不觸發 */
.bubble.level2-target{
  min-width:118px;
  padding:14px 20px;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.bubble.level2-target::after{
  content:"";
  position:absolute;
  inset:-14px -18px;
  border-radius:999px;
}
@media(max-width:720px){
  .bubble.level2-target{min-width:128px;padding:16px 22px;font-size:17px;}
  .bubble.level2-target::after{inset:-18px -22px;}
}