.game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-art { background: #d9f3f3; }
.cat-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.animal-art { display: grid; place-items: center; }
.animal-art span { font-size: 88px; line-height: 1; filter: drop-shadow(0 10px 4px rgba(59,67,75,.12)); }
.dog-art { background: #f4dfc8; }
.rabbit-art { background: #f8e7ec; }
.bear-art { background: #e9dfd1; }
.frog-art { background: #d9efdf; }
.cat-play { width: min(570px, 100%); margin: auto; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 210px); align-items: start; gap: 20px; }
.cat-label { color: #7a6a63; font-size: 12px; font-weight: 900; margin-bottom: 9px; }
.cat-outline-board { position: relative; width: 100%; aspect-ratio: 1; border: 3px dashed #e9caa7; border-radius: 27px; background: #fff6e8; overflow: hidden; }
.cat-slot { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: none; }
.cat-slot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cat-slot:not(.done):hover svg, .cat-slot.drop-hover svg { filter: drop-shadow(0 0 7px #7ccfa4); }
.cat-slot.wrong-hover svg { filter: drop-shadow(0 0 7px #f3a09a); }
.cat-slot.done { pointer-events: none; }
.cat-tray { min-height: 320px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; }
.cat-tray:empty { min-height: 0; }
.cat-piece { width: 100%; height: 95px; display: grid; place-items: center; padding: 6px; border: 2px solid #f0e1cc; border-radius: 18px; background: #fff; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 4px 0 #eadcca; }
.cat-piece svg { width: 100%; height: 100%; max-width: 86px; display: block; overflow: visible; filter: drop-shadow(0 3px 2px rgba(131,85,54,.16)); }
.cat-piece.selected { outline: 4px solid #6a9fc6; }
.cat-piece.dragging { opacity: .38; cursor: grabbing; }
.cat-floating-piece { position: fixed; z-index: 1000; pointer-events: none; filter: drop-shadow(0 12px 9px rgba(47,62,82,.28)); }
.cat-floating-piece svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 1050px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cat-play { grid-template-columns: 1fr; justify-items: center; gap: 10px; } .cat-board-wrap { width: min(250px, 100%); } .cat-tray-wrap { width: min(270px, 100%); } .cat-tray { min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .cat-piece { height: 70px; } }
@media (max-width: 390px) { .game-grid { grid-template-columns: 1fr; } .cat-board-wrap { width: min(225px, 100%); } .cat-tray-wrap { width: min(240px, 100%); } .cat-piece { height: 62px; } }