:root {
  --bg: #0d0a16; --panel: #191428; --panel2: #221b36; --line: #2e2548;
  --ink: #f4f0ff; --mut: #a59bc6; --gold: #ffc83d; --pink: #ff3d8b; --good: #3ddc97; --bad: #ff4d5e;
  --radius: 20px;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background-color: var(--bg);
  background-image: radial-gradient(ellipse at 50% -10%, #3a1659 0, var(--bg) 62%); background-attachment: fixed;
  font: 16px/1.5 "Outfit", system-ui, sans-serif;
}
button, input { font: inherit; color: inherit }
[hidden] { display: none !important }
.wrap { max-width: 920px; margin: 0 auto; padding: 16px 16px 40px }

/* ---------- buttons ---------- */
.btn {
  border: 0; border-radius: 14px; padding: 12px 22px; cursor: pointer; font-weight: 800; color: #1a1020;
  background: linear-gradient(90deg, var(--gold), #ff9d3d); transition: transform .15s, opacity .15s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px) }
.btn:disabled { opacity: .45; cursor: default }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line) }
.btn.ghost:hover:not(:disabled) { border-color: var(--mut) }
.btn.gold { background: linear-gradient(90deg, var(--gold), var(--pink)) }
.btn.small { padding: 8px 14px; font-size: 14px; font-weight: 600 }
.btn em { font-style: normal; color: var(--mut); font-weight: 400 }
.icon-btn { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; width: 42px; height: 42px; cursor: pointer; font-size: 18px }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px }

/* ---------- home ---------- */
.hero { text-align: center; padding: 18px 0 8px }
h1 { font: 400 clamp(44px, 12vw, 84px)/1 "Bungee", Impact, sans-serif; margin: 10px 0 8px; letter-spacing: .02em }
h1 span { display: inline-block; background: linear-gradient(90deg, var(--gold), #ff9d3d); -webkit-background-clip: text; background-clip: text; color: transparent }
h1 span + span { margin-left: .15em; transform: rotate(-4deg); background-image: linear-gradient(90deg, var(--pink), var(--gold)) }
.sub { color: var(--mut); margin: 0 auto 18px; max-width: 520px }
.sub b { color: var(--bad) }
.hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px }
.loading { text-align: center; color: var(--mut) }

.cat { margin: 26px 0 }
.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px }
.cat-head h2 { margin: 0; font: 400 22px/1.2 "Bungee", sans-serif; color: var(--c) }
.cat-head p { margin: 2px 0 0; color: var(--mut); font-size: 14px }
.cat-head .meta { font-size: 13px; color: var(--mut) }
.owned-tag { font-size: 13px; color: var(--good); border: 1px solid var(--good); border-radius: 99px; padding: 4px 12px; white-space: nowrap }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px }
.agent {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center;
  cursor: pointer; transition: transform .15s, border-color .15s; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.agent:hover { transform: translateY(-3px); border-color: var(--c) }
.agent .avatar { width: 108px; height: 108px }
.agent b { font-size: 17px; margin-top: 6px }
.agent small { color: var(--mut); line-height: 1.3 }
.agent .topic { font-size: 13px; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .04em }
.agent .tag { margin-top: 8px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--panel2); color: var(--mut) }
.agent .tag.free { color: var(--good) }
.agent.locked .avatar { filter: grayscale(.85) brightness(.6) }
.agent.locked::after { content: "🔒"; position: absolute; top: 12px; right: 14px; font-size: 18px }
.agent .best { font-size: 12px; color: var(--gold) }

/* ---------- avatar ---------- */
.avatar { width: 160px; height: 160px; flex: none; border-radius: 50%; --lid: 0 }
.avatar svg { width: 100%; height: 100%; display: block; overflow: visible }
.avatar .m, .avatar .eh, .avatar .steam, .avatar .vein, .avatar .sweat, .avatar .blush { display: none }
.avatar .m-idle { display: inline }
.avatar .flush { opacity: 0; transition: opacity .35s }

/* idle life: sway, breathe, blink, glance (each avatar has its own --d delay) */
.avatar .head { transform-box: view-box; transform-origin: 100px 150px; animation: sway 4.2s ease-in-out var(--d, 0s) infinite alternate }
.avatar .body { transform-box: view-box; transform-origin: 100px 200px; animation: breathe 3.2s ease-in-out var(--d, 0s) infinite alternate }
.avatar .lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(var(--lid)); animation: blink 5.5s var(--d, 0s) infinite }
.avatar .look { animation: glance 9s ease-in-out var(--d, 0s) infinite }
.avatar .pupil { transform-box: fill-box; transform-origin: center; transition: transform .2s }
.avatar .brow { transform-box: fill-box; transform-origin: center; transition: transform .25s }
.avatar .ant { animation: throb 1s infinite alternate }
.agent:hover .avatar .brow { translate: 0 -4px }

/* waiting for your answer: half-lidded side-eye, one brow up */
.avatar.mood-wait { --lid: .45 }
.avatar.mood-wait .m-idle { display: none }
.avatar.mood-wait .m-wait { display: inline }
.avatar.mood-wait .look { animation: sideeye 6s ease-in-out infinite }
.avatar.mood-wait .brow-l { transform: translateY(-7px) rotate(-8deg) }
.avatar.mood-wait .brow-r { transform: translateY(2px) rotate(5deg) }

/* happy */
.avatar.mood-happy .m-idle { display: none }
.avatar.mood-happy .m-happy, .avatar.mood-happy .blush { display: inline }
.avatar.mood-happy .eo { display: none }
.avatar.mood-happy .eh { display: inline }
.avatar.mood-happy .brow { transform: translateY(-6px) }
.avatar.mood-happy .head { animation: sway 4.2s ease-in-out var(--d, 0s) infinite alternate, hop .4s ease-in-out 3 alternate }

/* angry */
.avatar.mood-angry { --lid: .3; animation: shake .35s 2 }
.avatar.mood-angry .m-idle { display: none }
.avatar.mood-angry .m-angry, .avatar.mood-angry .steam, .avatar.mood-angry .vein, .avatar.mood-angry .sweat { display: inline }
.avatar.mood-angry .flush { opacity: .5 }
.avatar.mood-angry .look { animation: none }
.avatar.mood-angry .pupil { transform: scale(.65) }
.avatar.mood-angry .brow-l { transform: translateY(6px) rotate(24deg) }
.avatar.mood-angry .brow-r { transform: translateY(6px) rotate(-24deg) }
.avatar.mood-angry .head { animation: tremble .12s linear infinite }
.avatar .steam { transform-box: fill-box; animation: steam .9s ease-out infinite }
.avatar .vein { transform-box: fill-box; transform-origin: center; animation: pulse .35s ease-in-out infinite alternate }
.avatar .sweat { animation: drip 1.4s ease-in infinite }

/* talking: mouth shape comes from data-m (0 = mood mouth, 1-3 = open shapes) */
.avatar.talking:not([data-m="0"]) .m { display: none }
.avatar.talking[data-m="1"] .m-t1, .avatar.talking[data-m="2"] .m-t2, .avatar.talking[data-m="3"] .m-t3 { display: inline }
.avatar.mood-angry.talking[data-m="2"] .m-t2, .avatar.mood-angry.talking[data-m="3"] .m-t3 { display: none }
.avatar.mood-angry.talking[data-m="2"] .m-shout, .avatar.mood-angry.talking[data-m="3"] .m-shout { display: inline }
.avatar.talking .brow { animation: browtalk .3s ease-in-out infinite alternate }
.avatar.talking .head { animation: sway 4.2s ease-in-out var(--d, 0s) infinite alternate, nod .26s ease-in-out infinite alternate }
.avatar.mood-angry.talking .head { animation: tremble .1s linear infinite, nod .2s ease-in-out infinite alternate }

@keyframes sway { from { transform: rotate(-2deg) } to { transform: rotate(2deg) } }
@keyframes breathe { to { transform: scaleY(1.03) } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(var(--lid)) } 96% { transform: scaleY(1) } }
@keyframes glance { 0%, 30% { transform: translate(0, 0) } 34%, 48% { transform: translate(-3.5px, 0) } 52%, 66% { transform: translate(3px, -1px) } 70%, 100% { transform: translate(0, 0) } }
@keyframes sideeye { 0%, 42% { transform: translate(4px, -1px) } 50%, 88% { transform: translate(-4px, -1px) } 100% { transform: translate(4px, -1px) } }
@keyframes hop { to { translate: 0 -6px } }
@keyframes nod { to { translate: 0 2px } }
@keyframes browtalk { to { translate: 0 -2.5px } }
@keyframes tremble { 0% { transform: translate(1.5px, 0) rotate(.6deg) } 50% { transform: translate(-1.5px, .5px) rotate(-.6deg) } 100% { transform: translate(1.5px, 0) rotate(.6deg) } }
@keyframes shake { 0%, 100% { transform: translateX(0) rotate(0) } 25% { transform: translateX(-7px) rotate(-3deg) } 75% { transform: translateX(7px) rotate(3deg) } }
@keyframes steam { from { opacity: 1; transform: translateY(4px) scale(.7) } to { opacity: 0; transform: translateY(-18px) scale(1.2) } }
@keyframes pulse { to { transform: scale(1.25) } }
@keyframes drip { from { opacity: 1; translate: 0 0 } to { opacity: 0; translate: 0 14px } }
@keyframes throb { to { opacity: .4 } }

/* ---------- play ---------- */
.bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px }
.bar-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2 }
.bar-mid b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bar-mid span { color: var(--mut); font-size: 14px }
.bar-right { display: flex; align-items: center; gap: 12px }
.strikes { display: flex; gap: 5px }
.strikes i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); display: block }
.strikes i.hit { background: var(--bad); border-color: var(--bad); box-shadow: 0 0 10px var(--bad) }
.score { font: 400 22px "Bungee", sans-serif; color: var(--gold); min-width: 3ch; text-align: right }
.stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 4px }
.avatar.big { width: min(220px, 55vw); height: min(220px, 55vw) }
.bubble {
  position: relative; max-width: 560px; min-height: 52px; background: var(--ink); color: #1a1020; border-radius: 18px; padding: 12px 18px;
  font-weight: 600; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.35)
}
.bubble::before { content: ""; position: absolute; top: -10px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: var(--ink) }
.bubble:empty { visibility: hidden }
.bubble.angry { background: var(--bad); color: #fff }
.bubble.angry::before { border-bottom-color: var(--bad) }
.bubble.happy { background: var(--good); color: #0b2a1c }
.bubble.happy::before { border-bottom-color: var(--good) }
.bubble .grawlix { font-family: "Bungee", sans-serif; letter-spacing: .05em }
.qtools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px }
.qtext { text-align: center; font-size: 19px; font-weight: 600; margin: 12px auto 0; max-width: 620px }
.hint { text-align: center; color: var(--mut); font-size: 14px; margin: 8px 0 0; min-height: 1.5em }
.answer { display: flex; gap: 8px; max-width: 620px; margin: 10px auto 0 }
.answer input {
  flex: 1; min-width: 0; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 17px
}
.answer input:focus { border-color: var(--gold); outline: none }
.mic { width: 50px; flex: none; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); cursor: pointer; font-size: 20px }
.mic.on { border-color: var(--bad); background: #3a1020; animation: throb .6s infinite alternate }
.heard { text-align: center; color: var(--mut); font-size: 14px; min-height: 1.5em; margin: 6px 0 0 }
.feedback { max-width: 620px; margin: 10px auto 0; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); text-align: center }
.feedback.good { border-color: var(--good) }
.feedback.bad { border-color: var(--bad) }
.feedback b.pts { color: var(--gold) }
.feedback .exp { color: var(--mut) }
.next-row { text-align: center; margin-top: 14px }

/* ---------- end ---------- */
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 24px 18px }
.end-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 20px }
.end-box h2 { font: 400 28px/1.15 "Bungee", sans-serif; margin: 10px 0 0 }
.end-line { color: var(--mut); margin: 0 }
.stats { display: flex; gap: 12px; margin: 14px 0; flex-wrap: wrap; justify-content: center }
.stats div { background: var(--panel2); border-radius: 14px; padding: 10px 18px; min-width: 92px; display: flex; flex-direction: column }
.stats b { font: 400 26px "Bungee", sans-serif; color: var(--gold) }
.stats span { color: var(--mut); font-size: 13px }
.upsell { background: linear-gradient(135deg, rgba(255,200,61,.12), rgba(255,61,139,.12)); border: 1px solid var(--pink); border-radius: 16px; padding: 14px; max-width: 460px; margin: 6px 0 10px }
.upsell p { margin: 0 0 10px }
.end-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center }

/* ---------- modal ---------- */
dialog {
  width: min(480px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 24px; padding: 22px 20px;
}
dialog::backdrop { background: rgba(5,3,10,.75) }
.modal-x { position: absolute; top: 10px; right: 10px }
.modal-x button { background: none; border: 0; cursor: pointer; font-size: 18px; color: var(--mut); padding: 6px }
dialog h3 { font: 400 22px "Bungee", sans-serif; margin: 0 30px 6px 0 }
dialog p { color: var(--mut); margin: 0 0 14px }
.offer { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px }
.offer.best { border-color: var(--gold); background: rgba(255,200,61,.06) }
.offer div { flex: 1 }
.offer b { display: block }
.offer small { color: var(--mut); line-height: 1.3; display: block }
.offer .btn { white-space: nowrap }
.restore { display: flex; gap: 8px; margin-top: 8px }
.restore input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px }
.code { display: block; word-break: break-all; font: 12px/1.4 ui-monospace, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; color: var(--mut) }
.note { font-size: 13px; color: var(--mut) }
.demo { color: var(--gold) }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #1a1020; font-weight: 600;
  padding: 12px 20px; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.5); z-index: 10; max-width: calc(100vw - 32px); text-align: center
}
.foot { text-align: center; color: var(--mut); font-size: 13px; margin-top: 40px }

@media (max-width: 520px) {
  .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .agent { padding: 12px 8px }
  .agent .avatar { width: 84px; height: 84px }
  .agent b { font-size: 15px }
  .agent small { font-size: 13px }
  .answer { flex-wrap: wrap }
  .answer input { flex-basis: calc(100% - 58px) }
  .answer .btn { flex: 1 }
  .offer { flex-wrap: wrap }
  .offer .btn { width: 100% }
}
@media (prefers-reduced-motion: reduce) {
  .avatar, .avatar * { animation: none !important }
}