.games-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.games-grid .catalog-hero { grid-column: 1 / -1; }
.games-grid .catalog-half { grid-column: span 3; }
.games-grid .catalog-wide { grid-column: span 4; }
.games-grid .catalog-small { grid-column: span 2; }
.games-grid .catalog-bottom { grid-column: span 3; }

.catalog-hero .game-art { height: 390px; }
.among-icon-art {
  position: relative;
  z-index: 1;
  width: min(45%, 230px);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 25%;
  filter: drop-shadow(0 25px 34px rgba(17, 25, 47, .28));
  transition: transform .4s, filter .4s;
}
.catalog-hero:hover .among-icon-art {
  transform: translateY(-7px) rotate(2deg) scale(1.035);
  filter: drop-shadow(0 32px 42px rgba(17, 25, 47, .34));
}
.catalog-half .game-art { height: 310px; }
.catalog-wide .game-art,
.catalog-small .game-art { height: 300px; }

.catalog-hero .helmet {
  width: 160px;
  height: 185px;
  border-radius: 62px 62px 42px 42px;
  transform: rotate(-3deg);
  box-shadow: 25px 25px 0 rgba(17, 25, 47, .12);
  transition: transform .4s;
}

.catalog-hero:hover .helmet { transform: rotate(4deg) scale(1.05); }
.catalog-hero .helmet:after { width: 102px; height: 55px; top: 31px; left: 31px; }

.catalog-label,
.croc-label {
  position: absolute;
  right: 24px;
  top: 24px;
  padding: 9px 13px;
  border-radius: 100px;
  background: #fff;
  color: #11192f;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  transform: rotate(3deg);
}

.croc-label { background: #126340; color: #fff; }
.grid-label { position:absolute;right:24px;top:24px;padding:9px 13px;border-radius:100px;background:#614fd0;color:#fff;font-size:10px;font-style:normal;font-weight:800;transform:rotate(3deg) }
.sea-label { position:absolute;right:24px;top:24px;padding:9px 13px;border-radius:100px;background:#0b466f;color:#fff;font-size:10px;font-style:normal;font-weight:800;transform:rotate(3deg) }
.spy-label,.board-label { position:absolute;right:20px;top:20px;padding:8px 11px;border-radius:100px;background:#fff;color:#11192f;font-size:9px;font-style:normal;font-weight:800;transform:rotate(3deg) }
.spy-art{background:radial-gradient(circle at 50% 50%,#263d78 0 22%,#111933 23% 57%,#060914 58%);color:#fff}
.spy-incognito{position:relative;z-index:1;width:220px;height:170px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));transition:transform .45s,filter .45s}
.spy-glasses{position:absolute;left:15px;right:15px;top:15px;display:flex;justify-content:center;gap:10px}
.spy-glasses:before{content:"";position:absolute;left:50%;top:34px;width:22px;height:8px;border-radius:999px;background:#4b5667;transform:translateX(-50%)}
.spy-glasses span{position:relative;width:72px;height:72px;border:8px solid #4b5667;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(7,12,26,.2));box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.spy-glasses span:first-child:before,.spy-glasses span:last-child:after{content:"";position:absolute;top:24px;width:40px;height:8px;border-radius:999px;background:#4b5667}
.spy-glasses span:first-child:before{right:58px}.spy-glasses span:last-child:after{left:58px}
.spy-mustache{position:absolute;left:0;top:86px;width:220px;height:90px;background:#3485c8;clip-path:path("M110 27 C98 16 87 18 78 29 C65 45 48 52 35 45 C25 39 23 27 29 18 C15 22 9 35 14 49 C22 69 46 76 67 68 C86 61 101 49 110 39 C119 49 134 61 153 68 C174 76 198 69 206 49 C211 35 205 22 191 18 C197 27 195 39 185 45 C172 52 155 45 142 29 C133 18 122 16 110 27 Z");filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.spy-mustache span{position:absolute;top:27px;width:15px;height:24px;border-radius:50%;background:#263d78}.spy-mustache span:first-child{left:25px;transform:rotate(-18deg)}.spy-mustache span:last-child{right:25px;transform:rotate(18deg)}
.game-card:is(:hover,:active,:focus-visible) .spy-incognito{filter:drop-shadow(0 26px 23px rgba(0,0,0,.48));transform:translateY(-7px) rotate(-3deg) scale(1.08)}
.chess-art { background-color:#d9c29c;background-image:linear-gradient(45deg,#3b7168 25%,transparent 25%),linear-gradient(-45deg,#3b7168 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#3b7168 75%),linear-gradient(-45deg,transparent 75%,#3b7168 75%);background-size:82px 82px;background-position:0 0,0 41px,41px -41px,-41px 0 }
.chess-symbol { color:#fff8e5;font:700 128px/1 Georgia,serif;filter:drop-shadow(0 12px 8px rgba(20,45,42,.34));transform:rotate(-4deg) }
.checkers-art { background-color:#eee1bf;background-image:linear-gradient(45deg,#7554a7 25%,transparent 25%),linear-gradient(-45deg,#7554a7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#7554a7 75%),linear-gradient(-45deg,transparent 75%,#7554a7 75%);background-size:82px 82px;background-position:0 0,0 41px,41px -41px,-41px 0 }
.checkers-symbol { display:flex;gap:12px;transform:rotate(-7deg) }
.checkers-symbol b,.checkers-symbol i { width:82px;height:82px;border-radius:50%;box-shadow:inset 0 -10px 0 rgba(0,0,0,.18),0 14px 20px rgba(35,24,54,.3) }
.checkers-symbol b { background:#fff8df;border:7px solid #4b356d }.checkers-symbol i { background:#2b1b42;border:7px solid #efc54f }
.kamisado-art{background-color:#f0dfb6;background-image:linear-gradient(135deg,rgba(255,255,255,.18) 25%,transparent 25% 75%,rgba(17,25,47,.08) 75%),linear-gradient(90deg,#8c5937 12.5%,#2e9b68 12.5% 25%,#e85345 25% 37.5%,#f1c84c 37.5% 50%,#e568aa 50% 62.5%,#7554a7 62.5% 75%,#3686cc 75% 87.5%,#ef812f 87.5%);background-size:82px 82px,100% 100%}
.kamisado-mini{position:relative;width:180px;height:130px;filter:drop-shadow(0 16px 17px rgba(41,26,49,.28));transform:rotate(-4deg);transition:transform .4s}
.kamisado-mini span,.kamisado-mini b,.kamisado-mini i{position:absolute;bottom:0;width:66px;height:69px;border:6px solid #fff7df;border-radius:48% 48% 20% 20%;background:linear-gradient(90deg,#2b1b42 0 40%,#e568aa 41% 59%,#2b1b42 60%);box-shadow:0 13px 18px rgba(0,0,0,.28)}
.kamisado-mini span:before,.kamisado-mini b:before,.kamisado-mini i:before{content:"";position:absolute;z-index:2;left:14px;top:-32px;width:27px;height:27px;border:4px solid #fff7df;border-radius:50%;background:radial-gradient(circle at 34% 41%,#2b1b42 0 2px,transparent 3px),radial-gradient(circle at 66% 41%,#2b1b42 0 2px,transparent 3px),linear-gradient(to bottom,#efbd8f 0 54%,#fff7df 55%)}
.kamisado-mini span:after,.kamisado-mini b:after,.kamisado-mini i:after{content:"";position:absolute;z-index:3;left:6px;top:-49px;width:43px;height:25px;background:#e568aa;clip-path:polygon(0 74%,25% 49%,48% 0,67% 47%,100% 71%,84% 100%,12% 100%);filter:drop-shadow(2px 0 0 #251735) drop-shadow(-2px 0 0 #251735) drop-shadow(0 -2px 0 #251735) drop-shadow(0 2px 0 #251735)}
.kamisado-mini span{left:4px}.kamisado-mini b{left:57px;bottom:22px;z-index:2;background:linear-gradient(90deg,#2b1b42 0 40%,#f1c84c 41% 59%,#2b1b42 60%)}.kamisado-mini b:after{background:#f1c84c}.kamisado-mini i{right:4px;background:linear-gradient(90deg,#2b1b42 0 40%,#3686cc 41% 59%,#2b1b42 60%)}.kamisado-mini i:after{background:#3686cc}
.game-card:hover .kamisado-mini{transform:rotate(2deg) translateY(-6px) scale(1.04)}
.catalog-bottom .ship { transition: transform .4s, filter .4s; }
.catalog-bottom:hover .ship { transform: translateY(-7px) rotate(-2deg) scale(1.05); filter: drop-shadow(0 14px 16px rgba(10,67,105,.22)); }
.catalog-wide .croc { transition: transform .4s; }
.catalog-wide:hover .croc { transform: rotate(7deg) scale(1.08); }

.game-card:active{transform:translateY(-3px) scale(.985)}
.chess-symbol,.checkers-symbol,.mini-grid,.hat,.face{transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .42s}
.game-card:is(:hover,:active,:focus-visible) .chess-symbol{transform:translateY(-10px) rotate(7deg) scale(1.08);filter:drop-shadow(0 20px 13px rgba(20,45,42,.42))}
.game-card:is(:hover,:active,:focus-visible) .checkers-symbol{transform:rotate(3deg) scale(1.06)}
.game-card:is(:hover,:active,:focus-visible) .checkers-symbol b{transform:translate(12px,-8px) rotate(-10deg)}.game-card:is(:hover,:active,:focus-visible) .checkers-symbol i{transform:translate(-12px,8px) rotate(10deg)}
.game-card:is(:hover,:active,:focus-visible) .mini-grid{transform:rotate(-5deg) scale(1.08);filter:drop-shadow(10px 12px 0 rgba(97,79,208,.16))}
.game-card:is(:hover,:active,:focus-visible) .kamisado-mini span{transform:translateY(-8px) rotate(-5deg)}.game-card:is(:hover,:active,:focus-visible) .kamisado-mini b{transform:translateY(-15px) rotate(4deg)}.game-card:is(:hover,:active,:focus-visible) .kamisado-mini i{transform:translateY(-5px) rotate(7deg)}
.kamisado-mini span,.kamisado-mini b,.kamisado-mini i,.checkers-symbol b,.checkers-symbol i{transition:transform .42s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.game-card,.game-card *{animation:none!important;transition-duration:.01ms!important}}
.catalog-hero:is(:hover,:active,:focus-visible) .among-icon-art{transform:translateY(-9px) rotate(4deg) scale(1.07);filter:drop-shadow(0 35px 44px rgba(17,25,47,.38))}
.catalog-half:is(:hover,:active,:focus-visible) .face{transform:rotate(5deg) scale(1.07)}
.catalog-wide:is(:hover,:active,:focus-visible) .croc{transform:translateY(-7px) rotate(8deg) scale(1.09)}
.catalog-bottom:is(:hover,:active,:focus-visible) .ship{transform:translate(8px,-8px) rotate(4deg) scale(1.06);filter:drop-shadow(0 18px 18px rgba(10,67,105,.28))}

@media (max-width: 900px) {
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games-grid .catalog-hero,
  .games-grid .catalog-wide { grid-column: 1 / -1; }
  .games-grid .catalog-half,
  .games-grid .catalog-small,
  .games-grid .catalog-bottom { grid-column: span 1; }
}

@media (max-width: 620px) {
  .games-hero { contain: paint; }
  .hero-doodle { display: none; }
  .games-grid { grid-template-columns: 1fr; }
  .games-grid .catalog-hero,
  .games-grid .catalog-half,
  .games-grid .catalog-wide,
  .games-grid .catalog-small,
  .games-grid .catalog-bottom { grid-column: 1; }
  .catalog-hero .game-art,
  .catalog-half .game-art,
  .catalog-wide .game-art,
  .catalog-small .game-art { height: 270px; }
  .catalog-label,
  .croc-label,
  .sea-label,
  .spy-label,
  .board-label { right: 17px; top: 17px; }
  .among-icon-art { width: 170px; }
}

/* Те же мудрецы, что и на игровой доске Камисадо. */
.kamisado-mini>.promo-sage{position:absolute;z-index:1;bottom:0;width:66px;height:80px;border:0;border-radius:0;background:none;box-shadow:none;--sage-color:#e568aa;--sage-robe:#2b1b42;--sage-edge:#fff7df;--sage-beard:#dfd2e8}.kamisado-mini>.promo-sage:nth-child(1){left:2px}.kamisado-mini>.promo-sage:nth-child(2){left:57px;bottom:22px;z-index:2}.kamisado-mini>.promo-sage:nth-child(3){left:auto;right:2px}.kamisado-mini>.promo-sage.sage-yellow{--sage-color:#f1c84c}.kamisado-mini>.promo-sage.sage-blue{--sage-color:#3686cc}
.kamisado-mini>.promo-sage:before{content:"";position:absolute;z-index:1;left:10%;right:10%;top:41%;bottom:0;border:4px solid var(--sage-edge);border-radius:48% 48% 18% 18%;background:linear-gradient(90deg,var(--sage-robe) 0 40%,var(--sage-color) 41% 59%,var(--sage-robe) 60%);box-shadow:0 7px 10px rgba(35,21,50,.35)}.kamisado-mini>.promo-sage:after{content:"";position:absolute;z-index:3;left:50%;top:20%;width:45%;aspect-ratio:1;border:4px solid var(--sage-edge);border-radius:50%;background:radial-gradient(circle at 34% 43%,#30203f 0 4%,transparent 5%),radial-gradient(circle at 66% 43%,#30203f 0 4%,transparent 5%),#efbd8f;transform:translateX(-50%)}
.kamisado-mini>.promo-sage>i{position:absolute;z-index:5;left:5%;right:5%;top:0;width:auto;height:35%;border:0;border-radius:0;background:var(--sage-edge);box-shadow:none;clip-path:polygon(0 74%,25% 49%,48% 0,67% 47%,100% 71%,84% 100%,12% 100%);transform:none}.kamisado-mini>.promo-sage>i:before{content:"";position:absolute;inset:3px 4px 2px;background:var(--sage-color);border:0;border-radius:0;clip-path:polygon(0 74%,25% 49%,48% 0,67% 47%,100% 71%,84% 100%,12% 100%)}.kamisado-mini>.promo-sage>i:after{content:none}.kamisado-mini>.promo-sage>b{position:absolute;z-index:4;left:31%;right:31%;top:43%;width:auto;height:34%;border:0;border-radius:0;background:var(--sage-beard);box-shadow:none;clip-path:polygon(0 0,100% 0,78% 68%,52% 100%,23% 68%);transform:none}.kamisado-mini>.promo-sage>b:before,.kamisado-mini>.promo-sage>b:after{content:none}.kamisado-mini>.promo-sage>em{position:absolute;z-index:4;left:22%;right:22%;bottom:13%;height:10%;border-radius:999px;background:var(--sage-color);box-shadow:0 0 0 2px var(--sage-edge)}
.game-card:is(:hover,:active,:focus-visible) .promo-sage>i,.game-card:is(:hover,:active,:focus-visible) .promo-sage>b{transform:none}
.kamisado-mini>.promo-sage{--sage-eye:#fff8e5}.kamisado-mini>.promo-sage.light{--sage-robe:#fff8e5;--sage-edge:#342442;--sage-beard:#fffaf0;--sage-eye:#17121c}.kamisado-mini>.promo-sage.dark{--sage-eye:#fff8e5}.kamisado-mini>.promo-sage:after{background:radial-gradient(circle at 34% 43%,var(--sage-eye) 0 2px,transparent 3px),radial-gradient(circle at 66% 43%,var(--sage-eye) 0 2px,transparent 3px),#efbd8f}

.croc-card-character{position:relative;isolation:isolate;width:235px;height:128px;display:flex;justify-content:center;gap:54px;border:5px solid #0d3d2b;border-radius:48% 48% 42% 42%;background:#2f9b68;filter:drop-shadow(0 20px 20px rgba(13,61,43,.25));transition:transform .4s}.croc-card-character:before{content:"";position:absolute;z-index:-1;left:18px;right:18px;top:38px;height:60px;border-radius:50%;background:#43ad78}.croc-card-character>i{position:relative;width:44px;height:44px;margin-top:-16px;border:9px solid #0d3d2b;border-radius:50%;background:#fff;animation:catalog-croc-blink 4.2s ease-in-out infinite}.croc-card-character>i:after{content:"";position:absolute;left:8px;top:8px;width:9px;height:9px;border-radius:50%;background:#13241d}.croc-card-character>b{position:absolute;z-index:3;left:50%;bottom:12px;width:145px;height:45px;overflow:hidden;border:4px solid #0d3d2b;border-radius:15px 15px 68px 68px;background:#34202a;transform:translateX(-50%) scaleY(.23);transform-origin:50% 0;animation:catalog-croc-mouth 2.8s cubic-bezier(.55,.05,.35,1) infinite}.croc-card-character>b:before{content:"";position:absolute;z-index:2;left:9px;right:9px;top:-1px;height:16px;background:repeating-linear-gradient(135deg,#fff 0 9px,transparent 9px 19px);clip-path:polygon(0 0,100% 0,94% 100%,86% 18%,76% 100%,66% 18%,56% 100%,46% 18%,36% 100%,26% 18%,16% 100%,6% 18%)}.croc-card-character>b>span{position:absolute;left:27px;right:27px;bottom:-5px;height:22px;border-radius:50% 50% 0 0;background:#f07b83}.game-card:is(:hover,:active,:focus-visible) .croc-card-character{transform:translateY(-7px) rotate(3deg) scale(1.05)}
@keyframes catalog-croc-mouth{0%,36%,100%{transform:translateX(-50%) scaleY(.23)}52%,78%{transform:translateX(-50%) scaleY(1)}}@keyframes catalog-croc-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}

/* Та же профильная версия в каталоге; движение запускает только карточка. */
.croc-card-character{width:240px;height:132px;display:block;border:0;border-radius:0;background:none;filter:drop-shadow(0 18px 18px rgba(13,61,43,.24));transform:rotate(-3deg)}
.croc-card-character:before{content:"";position:absolute;z-index:1;left:18px;right:auto;top:22px;width:154px;height:89px;border:5px solid #0d3d2b;border-radius:62% 36% 43% 55%;background:linear-gradient(145deg,#43ad78,#2f9b68)}
.croc-card-character:after{content:"";position:absolute;z-index:2;left:134px;top:55px;width:91px;height:51px;border:5px solid #0d3d2b;border-left:0;border-radius:0 62% 48% 18%;background:radial-gradient(circle at 76% 31%,#0d3d2b 0 4px,transparent 5px),#51ba83}
.croc-card-character>i{position:absolute;z-index:5;left:65px;top:6px;width:44px;height:44px;margin:0;border:9px solid #0d3d2b;border-radius:50%;background:#fff;animation:none}.croc-card-character>i:nth-of-type(2){display:none}.croc-card-character>i:after{left:15px;top:9px}
.croc-card-character>b{z-index:7;left:117px;bottom:18px;width:103px;height:39px;border-radius:10px 15px 52px 20px;transform:scaleY(.18) rotate(-1deg);transform-origin:10% 0;animation:none}.croc-card-character>b>span{left:23px;right:15px;bottom:-5px;height:18px}
.game-card:is(:hover,:active,:focus-visible) .croc-card-character>b{animation:catalog-profile-mouth .78s cubic-bezier(.55,.05,.35,1) 2}.game-card:is(:hover,:active,:focus-visible) .croc-card-character>i:first-of-type{animation:catalog-profile-blink .78s ease-in-out 2}
@keyframes catalog-profile-mouth{0%,100%{transform:scaleY(.18) rotate(-1deg)}42%,72%{transform:scaleY(1) rotate(2deg)}}@keyframes catalog-profile-blink{0%,42%,58%,100%{transform:scaleY(1)}50%{transform:scaleY(.12)}}
.kamisado-mini>.promo-sage.light:after{background:radial-gradient(circle at 34% 35%,#111018 0 3px,transparent 3.5px),radial-gradient(circle at 66% 35%,#111018 0 3px,transparent 3.5px),#efbd8f}
@media(prefers-reduced-motion:reduce){.croc-card-character,.croc-card-character *{animation:none!important;transition:none!important}}