/* interactivity + new features */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.pop-in { animation: popIn .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.ex { animation: slideIn .28s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.bounce { animation: bounce .45s; }
@keyframes bounce { 30% { transform: scale(1.06); } 60% { transform: scale(.98); } }
.feedback { animation: rise .22s ease-out; }
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
.choice, .tile, .btn, .node, a.card { transition: transform .08s, box-shadow .08s, background .15s, border-color .15s; }
.choice:hover:not(:disabled), .tile:hover { transform: translateY(-2px); }
.choice:active:not(:disabled), .tile:active { transform: translateY(2px); }
.node:hover { transform: scale(1.08); }
.bar > div { position: relative; background: linear-gradient(90deg, var(--green), #89e219); }
.bar > div::after { content: ''; position: absolute; top: 3px; left: 8px; right: 8px; height: 4px; border-radius: 9px; background: rgba(255, 255, 255, .35); }
.combo { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-weight: 900; padding: 8px 18px; border-radius: 99px;
  box-shadow: 0 4px 0 #cc7800; z-index: 20; animation: comboIn .9s ease-out forwards; pointer-events: none; white-space: nowrap; }
@keyframes comboIn { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 75% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -20px); } }
.streak-pill { display: inline-flex; gap: 6px; align-items: center; color: var(--orange); font-weight: 900; }
.done-screen h1 { animation: popIn .5s cubic-bezier(.2, 1.4, .4, 1); }
.stat { animation: popIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.stat:nth-child(2) { animation-delay: .1s; } .stat:nth-child(3) { animation-delay: .2s; } .stat:nth-child(4) { animation-delay: .3s; }
.tip-pop { position: fixed; z-index: 50; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.15); animation: popIn .2s; max-width: 260px; }

/* AI tutor */
.ai-box { margin-top: 18px; border: 2px solid var(--purple); border-radius: 16px; overflow: hidden; animation: popIn .3s; text-align: left; }
.ai-head { background: var(--purple); color: #fff; padding: 6px 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.ai-body { padding: 12px 14px; font-weight: 600; line-height: 1.55; color: var(--text); }
.btn.purple { background: var(--purple); box-shadow: 0 4px 0 #a568cc; }
.btn.sm { padding: 6px 10px; font-size: 12px; border-radius: 10px; box-shadow: 0 3px 0 var(--line); }
.btn.red.sm { box-shadow: 0 3px 0 var(--red-d); }
.dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* placement + focus */
.pill.warn { background: color-mix(in srgb, var(--orange) 20%, var(--card)); color: #b36b00; border-color: transparent; }
.pill.bad { background: var(--bad-bg); color: var(--bad-text); border-color: transparent; }
a.pill:hover { filter: brightness(.95); }
.card.focus { border-color: var(--blue); }
.lead { font-size: 18px; }

/* admin */
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 2px solid var(--line); cursor: pointer; }
.switch { appearance: none; width: 50px; height: 28px; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .2s; }
.switch:checked { background: var(--green); } .switch:checked::after { left: 25px; }
select.field { appearance: auto; }
.admin-users td { vertical-align: middle; }

/* home hero art */
.hero-art { position: relative; height: 260px; }
.hero-word { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(56px, 9vw, 96px); font-weight: 900; color: var(--green); letter-spacing: -.03em; text-shadow: 0 6px 0 color-mix(in srgb, var(--green-d) 35%, transparent); }
.bubble { position: absolute; background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 16px; padding: 8px 14px; font-weight: 900; animation: floaty 4s ease-in-out infinite; }
.bubble.b1 { top: 6%; left: 4%; color: var(--blue); } .bubble.b2 { top: 12%; right: 6%; color: var(--green-d); animation-delay: .8s; }
.bubble.b3 { bottom: 10%; left: 12%; color: var(--purple); animation-delay: 1.6s; } .bubble.b4 { bottom: 4%; right: 10%; color: var(--orange); animation-delay: 2.4s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 760px) { .hero-art { height: 180px; order: -1; } }