.brand{display:flex;align-items:center;gap:8px}
.brand-mascot{width:38px;height:38px;object-fit:contain}
.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;overflow:hidden}
.hero-copy{flex:1}
.hero-kicker{font-size:.72rem;letter-spacing:.18em;color:#7d9a72;font-weight:800}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);margin:.2em 0}
.hero-mascot{width:170px;height:170px;object-fit:contain;filter:drop-shadow(0 12px 14px #9b7a3830);animation:bob 3s ease-in-out infinite}
.inline-mascot{width:42px;height:42px;object-fit:contain;vertical-align:middle;margin-right:6px}
.card>img{width:100%;height:130px;object-fit:cover;border-radius:14px}
.card .icon{height:130px;display:grid;place-items:center;background:linear-gradient(145deg,#fff8df,#eef8dd);border-radius:14px;padding:8px;overflow:hidden}
.card .icon img{display:block;width:100%;height:100%;max-width:110px;max-height:110px;object-fit:contain}
.tile img{width:72%;height:72%;object-fit:contain}
.board{width:100%;min-width:0}
.toolbar{flex-wrap:wrap}
.toolbar input{flex:1;min-width:160px}
.toolbar select{width:auto;min-width:130px;margin:0}
.card[hidden]{display:none}
.tile{min-width:0;padding:0;font-size:clamp(1.1rem,4vw,2rem)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media(max-width:600px){.brand{font-size:1.15rem}.brand-mascot{width:32px;height:32px}.hero{padding:18px;gap:8px}.hero-mascot{width:105px;height:105px}.card>img,.card .icon{height:90px}}