/* ===== Тема «Динозавры и взрывы» — включается классом .dino на <html> ===== */
html.dino {
  --ink: #1B1210;
  --ink-2: #4A3428;
  --muted: #8C6B4F;
  --line: #E9CF98;
  --bg: #F6E3B4;
  --card: #FFF8EA;
  --red: #FF5A1F;
  --red-dark: #D93A0B;
  --red-soft: #FFE1C7;
  --lava: linear-gradient(135deg, #FFD23F 0%, #FF8A1F 45%, #E8262B 100%);
  --volcano: #2B1B17;
  --shadow: 5px 5px 0 #1B1210;
  --head: 'Russo One', 'Jost', system-ui, sans-serif;
}
.dino-only { display: none; }
html.dino .dino-only { display: revert; }

html.dino body {
  background-color: var(--bg);
  background-image: url(/img/foot.svg), radial-gradient(circle at 100% 100%, rgba(255, 90, 31, .18), transparent 40%);
  background-size: 120px 120px, 100% 100%;
  background-attachment: fixed;
}
html.dino h1 { letter-spacing: .01em; text-shadow: 3px 3px 0 #FFD23F; }
html.dino .page-head h1::after {
  content: ''; display: inline-block; width: 38px; height: 38px; margin-left: 10px; vertical-align: -6px;
  background: url(/img/boom.svg) center / contain no-repeat; animation: dino-wiggle 2.4s ease-in-out infinite;
}

/* cards: comic outline + offset shadow */
html.dino .card { border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); }
html.dino a.stat:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
html.dino .stat .value { font-family: var(--head); font-weight: 400; }
html.dino .stat.accent {
  background: var(--volcano) url(/img/boom.svg) no-repeat right -34px top -34px / 120px;
  color: #FFF4DE; position: relative; overflow: hidden;
}
html.dino .stat.accent .value { color: #FFD23F; }

/* buttons */
html.dino .btn {
  background: var(--lava); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--head); font-weight: 400; letter-spacing: .02em; transition: transform .08s, box-shadow .08s;
}
html.dino .btn:hover { background: var(--lava); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
html.dino .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
html.dino .btn.secondary { background: #FFF8EA; }
html.dino .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; font-family: var(--font); }
html.dino .btn.ghost:hover { background: rgba(0,0,0,.06); transform: none; }
html.dino .tip-btn { background: #FFD23F; }
html.dino .input { border: 2px solid var(--ink); background: #FFFDF6; }
html.dino .input:focus { box-shadow: 3px 3px 0 #FF8A1F; }
html.dino .tabs { border: 2px solid var(--ink); background: var(--line); }
html.dino .tabs button.active { background: #FFD23F; box-shadow: none; font-family: var(--head); font-weight: 400; }
html.dino .chip span, html.dino .choice-box { border: 2px solid var(--ink); }
html.dino .chip input:checked + span { background: #FFD23F; color: var(--ink); border-color: var(--ink); }
html.dino .choice input:checked + .choice-box { background: #FFE1C7; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* sidebar: volcano */
html.dino .sidebar {
  background: radial-gradient(ellipse at 50% 120%, #FF5A1F 0%, #8A2410 30%, var(--volcano) 62%);
  border-right: 3px solid var(--ink); overflow: hidden;
}
html.dino .sidebar::before {
  content: ''; position: absolute; left: 14px; bottom: 185px; width: 224px; height: 140px;
  background: url(/img/dino-jet.svg) center / contain no-repeat; pointer-events: none;
  animation: dino-jet 1.6s ease-in-out infinite;
}
html.dino .nav, html.dino .sidebar-foot, html.dino .sidebar .logo { position: relative; z-index: 1; }
html.dino .nav a { font-family: var(--head); font-weight: 400; letter-spacing: .02em; }
html.dino .nav a.active { background: var(--lava); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 #000; }
html.dino .sidebar-foot { border-top-color: rgba(255,210,63,.25); }
html.dino .topbar { background: var(--volcano); border-bottom: 3px solid var(--ink); }
html.dino .tabbar { background: #FFF8EA; border-top: 3px solid var(--ink); }
html.dino .tabbar a.active { color: #D93A0B; }

/* progress: lava + running dino */
html.dino .progress { height: 14px; border: 2px solid var(--ink); background: #FFFDF6; overflow: visible; margin-top: 18px; }
html.dino .progress > div {
  position: relative; border-radius: 99px;
  background: repeating-linear-gradient(-45deg, #FF8A1F 0 10px, #FF5A1F 10px 20px);
  background-size: 28px 28px; animation: dino-lava 1s linear infinite;
}
html.dino .progress > div::after {
  content: ''; position: absolute; right: -22px; top: -27px; width: 48px; height: 30px;
  background: url(/img/dino-jet-dark.svg) center / contain no-repeat; animation: dino-run .5s steps(2) infinite;
}
html.dino .progress.dark > div { background: repeating-linear-gradient(-45deg, #4C9A2A 0 10px, #3B7D23 10px 20px); }

/* stages */
html.dino .dot { border: 2px solid var(--ink); }
html.dino .stage.done .dot { background: #4C9A2A; border-color: var(--ink); }
html.dino .stage.done::before { background: var(--ink); }
html.dino .stage.current .dot { border: 0; background: url(/img/boom.svg) center / 30px no-repeat; animation: dino-wiggle 1.2s ease-in-out infinite; }
html.dino .stage.current .dot::after { display: none; }
html.dino .service-type { color: #D93A0B; font-family: var(--head); font-weight: 400; }

/* pills, avatar, messages */
html.dino .pill { border: 2px solid var(--ink); }
html.dino .avatar { background: var(--lava); color: var(--ink); border: 3px solid var(--ink); font-family: var(--head); font-weight: 400; }
html.dino .li-icon { border: 2px solid var(--ink); background: #FFF4DE; }
html.dino .li-icon.red { background: #FFD23F; color: var(--ink); }
html.dino .msg { border: 2px solid var(--ink); }
html.dino .msg.mine { background: var(--volcano); color: #FFF4DE; }
html.dino .contact-links a { border: 2px solid var(--ink); background: #FFF4DE; }
html.dino .install-banner { background: var(--volcano) url(/img/boom.svg) no-repeat right -40px center / 140px; }

/* modal & toast */
html.dino .modal { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); animation: dino-slam .35s cubic-bezier(.3, 1.6, .5, 1); }
html.dino .modal-back { background: rgba(43, 27, 23, .65); }
html.dino .toast { background: #FFD23F; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--head); font-weight: 400; animation: dino-slam .35s cubic-bezier(.3, 1.6, .5, 1); }
html.dino .toast::before { content: 'БАБАХ! '; color: #D93A0B; }
html.dino .toast.error { background: #E8262B; color: #fff; }
html.dino .toast.error::before { content: 'РРРР! '; color: #FFD23F; }

/* auth screen */
html.dino .auth-side { background: radial-gradient(ellipse at 30% 110%, #FF5A1F 0%, #8A2410 30%, var(--volcano) 65%); border-right: 4px solid var(--ink); }
html.dino .auth-side::after {
  border: 0; border-radius: 0; opacity: 1; width: 360px; height: 225px; right: 10px; bottom: auto; top: 40px;
  background: url(/img/dino-jet.svg) center / contain no-repeat; animation: dino-jet 1.6s ease-in-out infinite;
}
html.dino .auth-side > * { position: relative; z-index: 1; }
html.dino .auth-side h1 { text-shadow: 4px 4px 0 #000; }
html.dino .auth-side h1 span { color: #FFD23F; }
html.dino .auth-side li::before { background: #FFD23F; }
html.dino .auth-card h2 { font-weight: 400; }

/* click explosion */
.boom-burst { position: fixed; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; z-index: 100;
  background: url(/img/boom.svg) center / contain no-repeat; animation: dino-boom .55s ease-out forwards; }
.boom-spark { position: fixed; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; z-index: 100;
  background: #FFD23F; border: 2px solid #1B1210; animation: dino-spark .6s ease-out forwards; }

@keyframes dino-boom { 0% { transform: scale(.1) rotate(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(1.4) rotate(40deg); opacity: 0; } }
@keyframes dino-spark { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
@keyframes dino-wiggle { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }
@keyframes dino-pulse { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(6deg); } }
@keyframes dino-jet { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(8px, -10px) rotate(-6deg); } }
@keyframes dino-run { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
@keyframes dino-lava { to { background-position: 28px 0; } }
@keyframes dino-slam { 0% { transform: scale(.6) rotate(-3deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (max-width: 860px) {
  html.dino .page-head h1::after { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html.dino *, html.dino *::before, html.dino *::after { animation: none !important; }
}