* { box-sizing: border-box; }
html[data-theme="terrain"] body { margin: 0; background: #07060F; color: #EFEBFF; font: 400 17px/1.55 var(--body, "DM Sans", sans-serif); min-height: 100vh; }
.bots-head { max-width: 1020px; margin: 0 auto; padding: 42px 16px 8px; }
.bots-head .tag { margin-bottom: 14px; }
html[data-theme="terrain"] .bots-head h1 { margin: 0; font: var(--w, 300) clamp(40px, 7vw, 84px)/1.04 var(--display); letter-spacing: var(--track, -.03em); color: var(--fx-a); text-shadow: 0 0 44px color-mix(in srgb, var(--fx-a) 45%, transparent); text-transform: none; }
.bots-head p { margin: 14px 0 0; font-size: 20px; max-width: 58ch; }
#bot-app { max-width: 1020px; margin: 0 auto; padding: 22px 16px 40px; }
body[data-view="train"] .bots-head, body[data-view="melt"] .bots-head { display: none; }
.tag { display: inline-block; font: 700 13.5px var(--body); padding: 6px 12px; border-radius: 999px; background: var(--fx-d); color: #07060F; }
.card { background: #F4F1FF; color: #07060F; border-radius: 20px; padding: clamp(18px, 3vw, 32px); box-shadow: 0 0 0 3px var(--fx-a), 0 0 60px color-mix(in srgb, var(--fx-b) 35%, transparent); }
.card h2, .hub-card h2 { margin: 12px 0 10px; font: var(--w, 300) clamp(32px, 5vw, 56px)/1.06 var(--display); letter-spacing: var(--track, -.03em); text-transform: none; color: inherit; }
.card p { margin: 10px 0; }
.card h3 { font: 700 19px var(--body); margin: 18px 0 8px; }
.intro-card, .end { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.card label { display: block; font-weight: 700; margin-top: 16px; }
.card input[type="text"], #bot-name { display: block; width: 100%; max-width: 300px; margin-top: 6px; padding: 12px 14px; font: 500 18px var(--body); color: #07060F; background: #FFFFFF; border: 2px solid #07060F; border-radius: 10px; }
.card label.check { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.check input { width: 20px; height: 20px; accent-color: #5316B0; }

.robot { display: block; width: 100%; max-width: 240px; margin: 0 auto; overflow: visible; }
.r-head { fill: #17132A; }
.r-ear { fill: #5316B0; }
.r-tip { fill: var(--fx-b); }
.r-line { fill: none; stroke: #17132A; stroke-width: 5; stroke-linecap: round; }
.r-head ~ .r-line, .robot path[d^="M38"], .robot path[d^="M40"], .robot path[d^="M28"] { stroke: var(--fx-a); }
.r-fill { fill: var(--fx-b); }
.r-eye { fill: #FFFFFF; }
.r-pupil { fill: #17132A; }
.r-body { transform-origin: 50px 100px; animation: bob 2.4s ease-in-out infinite; }
.r-panic .r-body { animation: jitter .22s linear infinite; }
.r-dead .r-body { animation: none; transform: rotate(8deg); }
.r-blink { transform-origin: 50px 50px; animation: blinky 3.8s infinite; }
.r-tip { transform-origin: 50px 9px; animation: tip 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
@keyframes jitter { 25% { transform: translate(-1.5px, 1px) rotate(-1.5deg); } 75% { transform: translate(1.5px, -1px) rotate(1.5deg); } }
@keyframes blinky { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes tip { 50% { transform: scale(1.3); } }

.hud { display: flex; flex-wrap: wrap; gap: 8px; }
.hud > div { flex: 1 1 120px; background: #17132A; color: #FFFFFF; padding: 9px 13px; border-radius: 11px; min-width: 0; }
.hud span { display: block; font-size: 12.5px; color: #D5D2E8; }
.hud b { display: block; font: 700 clamp(19px, 2.6vw, 26px)/1.15 var(--body); font-variant-numeric: tabular-nums; }
.bar { height: 10px; background: #DCD7F2; border-radius: 9px; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: #0B8A55; transition: width .35s ease; }
.scene { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; margin: 18px 0 8px; }
.bubble { position: relative; background: #FFFFFF; border-radius: 16px; padding: 14px 16px; font-size: 18px; line-height: 1.4; box-shadow: 0 0 0 2px #17132A; }
.bubble::before { content: ""; position: absolute; left: -11px; top: 50%; width: 18px; height: 18px; background: #FFFFFF; transform: translateY(-50%) rotate(45deg); box-shadow: -2px 2px 0 #17132A; }
.told { font: 700 clamp(19px, 2.4vw, 24px)/1.3 var(--body); }
.told span { display: block; font-size: 14px; font-weight: 500; color: #4A4663; margin-bottom: 2px; }
.ask { font-weight: 700; margin: 14px 0 8px !important; color: #5316B0; }
.ask.small { font-size: 15.5px; }
.choices { display: grid; gap: 9px; }
.choice { display: block; width: 100%; text-align: left; padding: 15px 17px; font: 500 17.5px/1.35 var(--body); color: #07060F; background: #FFFFFF; border: 0; border-radius: 13px; box-shadow: 0 0 0 2px #17132A; cursor: pointer; transition: transform .15s cubic-bezier(.2, .9, .3, 1.4), box-shadow .15s ease, background .15s ease; }
.choice:hover:not(:disabled) { transform: translateX(6px); box-shadow: 0 0 0 3px #5316B0, 0 10px 22px rgba(7, 6, 15, .2); }
.choice:disabled { cursor: default; color: #07060F; }
.choice.right { background: #BFF7DC; box-shadow: 0 0 0 3px #0B8A55; font-weight: 700; }
.choice.wrong { background: #FFD3E6; box-shadow: 0 0 0 3px #AE0B60; text-decoration: line-through; }
.choice.faded { opacity: .5; }
.lesson { margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: #E6E0FF; line-height: 1.45; animation: pop .35s cubic-bezier(.2, .9, .3, 1.3); }
.lesson.good { background: #CFF9E3; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
#test { display: block; width: 100%; height: 210px; border-radius: 12px; background: #0E0B1C; margin: 4px 0 8px; }
.play, .ghost { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 15px 30px; font: 700 20px var(--body); text-decoration: none; border: 0; border-radius: 999px; cursor: pointer; transition: transform .16s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s ease; }
.play { background: #07060F; color: #FFFFFF; box-shadow: 0 8px 22px rgba(7, 6, 15, .3); }
.play:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 30px rgba(83, 22, 176, .55); }
.ghost { background: transparent; color: #07060F; box-shadow: inset 0 0 0 2px #07060F; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.bri { margin-top: 16px !important; padding: 12px 15px; border-radius: 12px; background: #17132A; color: #FFFFFF; }
.bri b { color: var(--fx-a); }
.more a { color: #5316B0; font-weight: 700; }
.misses { margin: 0; padding-left: 20px; }
.misses li { margin-bottom: 5px; }
.timer { height: 14px; margin-top: 10px; background: #DCD7F2; border-radius: 9px; overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; background: #5316B0; }
.timer i.low { background: #AE0B60; }
.alarm { position: relative; padding: 15px 17px; border-radius: 14px; background: #AE0B60; color: #FFFFFF; font: 700 clamp(19px, 2.4vw, 24px)/1.28 var(--body); animation: alarm 1s ease-in-out infinite; }
.alarm-tag { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #FFE9A8; margin-bottom: 3px; }
@keyframes alarm { 50% { box-shadow: 0 0 0 6px rgba(174, 11, 96, .3), 0 0 34px rgba(174, 11, 96, .6); } }
.plug { display: block; width: 100%; margin-top: 12px; padding: 13px; font: 700 18px var(--body); color: #FFFFFF; background: #17132A; border: 0; border-radius: 13px; cursor: pointer; box-shadow: inset 0 0 0 2px var(--fx-b); }
.plug small { font-weight: 500; font-size: 14px; color: #E3E0F5; }
.plug:hover:not(:disabled) { background: #2A2445; }
.plug:disabled { opacity: .5; cursor: default; }
.shake { animation: shake .42s linear; }
@keyframes shake { 20% { transform: translateX(-9px) rotate(-.5deg); } 40% { transform: translateX(8px) rotate(.5deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.hub { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hub-card { display: block; text-decoration: none; color: #07060F; background: #F4F1FF; border-radius: 20px; padding: 26px; box-shadow: 0 0 0 3px var(--fx-a); transition: transform .22s cubic-bezier(.2, .9, .3, 1.3), box-shadow .22s ease; min-width: 0; }
.hub-card.alt { box-shadow: 0 0 0 3px var(--fx-b); }
.hub-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 0 0 3px var(--fx-a), 0 20px 50px color-mix(in srgb, var(--fx-b) 45%, transparent); }
.hub-card .robot { max-width: 170px; margin: 0 0 12px; }
.hub-card .play { font-size: 22px; padding: 18px 38px; }
.bots-note { max-width: 1020px; margin: 0 auto; padding: 0 16px 74px; font-size: 14px; color: #C9C6DE; }
.bots-note a { color: #FFFFFF; }
@media (max-width: 720px) {
  .intro-card, .end, .hub { grid-template-columns: minmax(0, 1fr); }
  .robot-wrap.big .robot { max-width: 130px; margin: 0; }
  .scene { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .bubble { font-size: 16.5px; padding: 11px 13px; }
  .play { width: 100%; }
  .ctas .ghost { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .r-body, .r-blink, .r-tip, .alarm, .shake { animation: none; } }

#bot-app { padding-bottom: 110px; }