:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f7efd8; background: #07141b; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% 25%, #153843 0, #07141b 48%, #050c12 100%); }
.shell { max-width: 1320px; margin: auto; padding: 28px 5vw 24px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar, footer { display: flex; align-items: center; justify-content: space-between; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; color: #9cb5ad; }
.brand { display: flex; align-items: center; gap: 10px; color: #f8eac5; font-weight: 800; letter-spacing: .24em; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #eab866; border-radius: 50%; color: #eab866; font-family: Georgia, serif; font-size: 1.1rem; letter-spacing: 0; }
.status { display: flex; gap: 8px; align-items: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #eab866; box-shadow: 0 0 14px #eab866; }
.hero { flex: 1; display: grid; grid-template-columns: .78fr 1.22fr; gap: 4vw; align-items: center; padding: 7vh 0 5vh; }
.eyebrow { color: #eab866; letter-spacing: .18em; text-transform: uppercase; font-size: .67rem; font-weight: 700; }
h1 { margin: 18px 0; font-family: Georgia, serif; font-weight: 400; font-size: clamp(3.3rem, 6vw, 6.5rem); line-height: .92; letter-spacing: -.06em; }
h1 em { color: #f0b45f; font-style: italic; }
.lede { max-width: 370px; color: #a6b8b1; line-height: 1.7; font-size: 1rem; }
button { margin-top: 22px; border: 0; border-radius: 999px; background: #eab866; color: #172128; padding: 15px 20px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 30px #eab86633; }
button span { display: inline-block; margin-left: 18px; font-size: 1.2rem; }
.activity-panel { margin-top: 1.5rem; max-width: 34rem; }
.panel-kicker { color: #eab866; font-size: .68rem; letter-spacing: .16em; margin: 0 0 .6rem; }
.activity-list { display: grid; gap: .45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.activity-card { align-items: flex-start; background: #ffffff0f; border: 1px solid #ffffff1f; border-radius: .7rem; color: #f7efd8; display: flex; flex-direction: column; gap: .25rem; margin-top: 0; padding: .7rem .8rem; text-align: left; }
.activity-card:hover { background: #eab8662e; }
.activity-card strong { font-size: .78rem; text-transform: capitalize; }
.activity-card span { color: #a6b8b1; font-size: .65rem; }
.activity-game { border-top: 1px solid #ffffff1f; margin-top: 1rem; padding-top: 1rem; }
.game-status { color: #f8eac5; font-size: .78rem; margin: 0 0 .7rem; }
.animal-grid, .category-grid { display: grid; gap: .4rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .6rem; }
.animal-card, .category-button { background: #ffffff0f; border: 1px solid #ffffff1f; border-radius: .55rem; color: #f7efd8; cursor: pointer; font-size: .7rem; margin: 0; padding: .55rem .35rem; }
.animal-card.selected, .category-button:hover { background: #eab866; color: #172128; }
.animal-card:disabled { cursor: default; opacity: .35; }
.stage-wrap { position: relative; padding: 15px; border: 1px solid #ffffff1c; border-radius: 24px; background: #ffffff08; box-shadow: 0 25px 80px #0008; }
canvas { width: 100%; display: block; border-radius: 15px; background: #0b2029; }
.stage-label { position: absolute; bottom: 30px; left: 32px; font-size: .62rem; letter-spacing: .15em; color: #f8eac5aa; }
.converted-preview { position: absolute; top: 28px; right: 28px; display: grid; gap: 5px; justify-items: end; margin: 0; color: #f8eac5aa; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.converted-preview img { image-rendering: pixelated; width: 84px; height: 84px; border: 1px solid #eab86666; border-radius: 10px; background: #07141b; padding: 9px; }
.converted-preview figcaption { background: #07141bcc; border-radius: 4px; padding: 3px 5px; }
footer { justify-content: flex-start; gap: 12px; padding-top: 16px; border-top: 1px solid #ffffff18; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; padding-top: 10vh; } .stage-wrap { order: -1; } h1 { font-size: 4rem; } }