.rex-home {
  display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: var(--s4, 16px);
  align-items: center; margin-top: var(--s3, 12px);
}
@media (max-width: 480px) { .rex-home { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.rex-pic {
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; max-width: 200px; margin-inline: auto;
}
.rex-pic svg { display: block; width: 100%; height: auto; overflow: visible; transition: width .4s ease; }
.rex-pic.rex-lvl-egg svg { width: 32%; }
.rex-pic.rex-lvl-baby svg { width: 55%; }
.rex-pic.rex-lvl-school svg { width: 63%; }
.rex-pic.rex-lvl-teen svg { width: 72%; }
.rex-pic.rex-lvl-rex svg { width: 88%; }
.rex-pic.rex-lvl-pawn svg { width: 69%; }
.rex-pic.rex-lvl-knight svg { width: 75%; }
.rex-pic.rex-lvl-officer svg { width: 81%; }
.rex-pic.rex-lvl-rook svg { width: 87%; }
.rex-pic.rex-lvl-queen svg { width: 93%; }
.rex-pic.rex-lvl-king svg { width: 100%; }
.rex-pic .dr-q { display: none !important; }
/* Шахматная лестница: Рекс — картинка ступени (rex-game.js, web/rex-looks),
   растёт вместе со ступенью. Внутрь #rex-pic кладёт свой слой rex-emotions.js. */
.rex-pic[data-art="img"] { position: relative; }
.rex-pic .rex-art { display: block; width: 100%; height: auto; aspect-ratio: 1; transition: width .4s ease; }
/* Осколки скорлупы у малыша (rex-rig.js, ground) — рядом с Рексом, того же
   кадра: Рекс дышит и прыгает (rex-emotions.css), а они лежат. */
.rex-pic .rex-ground { position: absolute; left: 50%; bottom: 0; width: 100%; translate: -50% 0; transition: width .4s ease; }
.rex-pic.rex-lvl-egg .rex-art, .rex-pic.rex-lvl-egg .rex-ground { width: 44%; }
.rex-pic.rex-lvl-baby .rex-art, .rex-pic.rex-lvl-baby .rex-ground { width: 60%; }
.rex-pic.rex-lvl-school .rex-art, .rex-pic.rex-lvl-school .rex-ground { width: 68%; }
.rex-pic.rex-lvl-pawn .rex-art, .rex-pic.rex-lvl-pawn .rex-ground { width: 75%; }
.rex-pic.rex-lvl-knight .rex-art, .rex-pic.rex-lvl-knight .rex-ground { width: 81%; }
.rex-pic.rex-lvl-officer .rex-art, .rex-pic.rex-lvl-officer .rex-ground { width: 86%; }
.rex-pic.rex-lvl-rook .rex-art, .rex-pic.rex-lvl-rook .rex-ground { width: 91%; }
.rex-pic.rex-lvl-queen .rex-art, .rex-pic.rex-lvl-queen .rex-ground { width: 96%; }
.rex-pic.rex-lvl-king .rex-art, .rex-pic.rex-lvl-king .rex-ground { width: 100%; }

.rex-info { min-width: 0; }
.rex-mood { margin: 0 0 var(--s2, 8px); font-size: 1.0625rem; font-weight: 600; }
.rex-food { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s2, 8px); font-size: 1.75rem; line-height: 1; }
@media (max-width: 480px) { .rex-food { justify-content: center; } }
.rex-food .is-half { opacity: .55; }
.rex-food .is-empty { opacity: .18; filter: grayscale(1); }
.rex-grow { margin: 0 0 var(--s1, 4px); }
.rex-bar { height: 10px; border-radius: 999px; background: var(--surface-2, #f3efe7); overflow: hidden; }
.rex-bar[hidden] { display: none; }
.rex-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: #f5a021; transition: width .4s ease; }
.rex-streak { margin: var(--s2, 8px) 0 0; font-weight: 600; }
.rex-streak[hidden] { display: none; }
.rex-crown { margin: var(--s2, 8px) 0 0; }
.rex-crown[hidden] { display: none; }

/* Отпуск на неделю (rex-game.js, шахматная лестница). */
.rex-vacation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2, 8px) var(--s3, 12px); margin-top: var(--s2, 8px); }
.rex-vacation[hidden], .rex-vacation .btn[hidden] { display: none; }
.rex-vacation p { margin: 0; flex: 1 1 220px; }

/* «Рекс убежал!» (rex-game.js, ranAway): прежний Рекс убегает за край,
   на его месте появляется яйцо. */
.rex-gone { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 16px; background: rgba(20, 16, 10, .62); }
.rex-gone-card { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px 20px 22px; border-radius: 22px; background: var(--surface, #fff); color: var(--ink, #1c1a17); text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.rex-gone-card h2 { margin: 10px 0 6px; }
.rex-gone-card p { margin: 0 0 16px; }
.rex-gone-pic { display: grid; justify-items: center; align-items: end; overflow: hidden; }
.rex-gone-pic > .rex-pic { grid-area: 1 / 1; max-width: 180px; }
.rex-gone-old { animation: rex-run-away 2.2s ease-in .9s forwards; }
.rex-gone-egg { opacity: 0; animation: rex-egg-in .6s ease-out 3s forwards; }
@keyframes rex-run-away {
  20% { transform: translateX(-6%) rotate(-3deg); }
  100% { transform: translateX(170%) rotate(10deg); opacity: 0; }
}
@keyframes rex-egg-in { to { opacity: 1; } }
/* «Переворот» (coupNote) — то же окно, Рекс стоит на месте. */
.rex-coup .rex-gone-pic > .rex-pic { animation: none; opacity: 1; }
.rex-coup .rex-gone-card p { margin: 0 0 10px; text-align: left; }
.rex-coup .rex-gone-card .rex-coup-rule { margin-bottom: 16px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2, #f3efe7); }
.rex-today { margin: var(--s2, 8px) 0 0; }

.rex-news { min-height: 1.5em; margin: var(--s3, 12px) 0 0; font-weight: 600; color: var(--accent-ink, #8f1219); }
.rex-news:empty { min-height: 0; margin: 0; }

.rex-ways-title { margin: var(--s4, 16px) 0 var(--s2, 8px); font-size: 1.0625rem; }
.rex-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3, 12px); }
.rex-ways > li { display: flex; gap: var(--s3, 12px); align-items: flex-start; padding: var(--s3, 12px); border: 1px solid var(--line, #e6e0d4); border-radius: var(--r-md, 14px); }
.rex-ways > li[hidden] { display: none; }
.rex-way-icon { flex: none; font-size: 1.75rem; line-height: 1; }
.rex-way-body { min-width: 0; }
.rex-way-body p { margin: 0; }
.rex-way-acts { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); margin-top: var(--s2, 8px); }
.rex-way-acts[hidden], .rex-way-acts .btn[hidden], #rex-no-lichess[hidden] { display: none; }
#rex-no-lichess { margin-top: var(--s2, 8px); }
.rex-rules { margin: var(--s3, 12px) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .rex-pic svg, .rex-pic .rex-art, .rex-pic .rex-ground, .rex-bar span { transition: none; }
  .rex-gone-old { animation: none; display: none; }
  .rex-gone-egg { animation: none; opacity: 1; }
}