.hero-banner{width:min(1200px,calc(100% - 40px));min-height:520px;margin:34px auto 52px;padding:clamp(38px,6vw,74px);display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:clamp(34px,6vw,80px);align-items:center;position:relative;overflow:hidden;border:1px solid var(--border);border-radius:34px;background:var(--surface);box-shadow:var(--shadow)}
.hero-banner::before{content:"";position:absolute;inset:auto -12% -45% auto;width:420px;height:420px;border:70px solid var(--accent-2);border-radius:50%;opacity:.05}
.hero-banner::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3))}
.hero-copy{position:relative;z-index:2}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:7px 14px;border:1px solid var(--border);border-radius:999px;color:var(--accent);font-size:.72rem;font-weight:900;letter-spacing:.14em;background:rgba(0,229,255,.06)}
.hero-banner h1{margin:0;color:var(--ink);font-size:clamp(3rem,6vw,5.8rem);font-weight:950;line-height:.92;letter-spacing:-.065em;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 50%,var(--accent-3) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-banner p{max-width:560px;margin:24px 0 0;color:var(--muted);font-size:clamp(1rem,2vw,1.2rem);font-weight:620}
.hero-cta{display:inline-flex;align-items:center;gap:18px;margin-top:32px;padding:14px 18px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--button-ink);font-size:.9rem;font-weight:900;text-decoration:none;box-shadow:0 10px 30px var(--glow-a);transition:transform .2s ease,box-shadow .2s ease}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 16px 40px var(--glow-b)}
.hero-cta span{font-size:1.3rem;line-height:1}
.hero-mosaic{height:390px;display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:1fr 1fr;gap:14px;position:relative;z-index:1}
.hero-tile{display:block;overflow:hidden;border:2px solid var(--border);border-radius:22px;background:var(--surface-soft);box-shadow:0 18px 36px rgba(0,0,0,.35);transition:transform .25s ease,border-color .25s ease}
.hero-tile:hover{transform:translateY(-5px) rotate(-1deg);border-color:var(--accent)}
.hero-tile-main{grid-row:1/3}
.hero-tile img{width:100%;height:100%;object-fit:cover;display:block}
.csha-game-body>.csha-recommend-content-hot{margin-bottom:58px}
.csha-game-body>.csha-recomed-div{width:100%;margin-top:50px}
.csha-recomed-div+.csha-recomed-div{margin-top:62px}
@media (max-width:900px){
  .hero-banner{grid-template-columns:1fr;min-height:auto;padding:42px}
  .hero-mosaic{height:330px}
}
@media (max-width:620px){
  .hero-banner{width:calc(100% - 28px);margin:20px auto 34px;padding:28px 22px;border-radius:24px;gap:30px}
  .hero-banner h1{font-size:clamp(2.7rem,15vw,4.4rem)}
  .hero-mosaic{height:250px;gap:9px}
  .hero-tile{border-width:1px;border-radius:15px}
  .hero-eyebrow{margin-bottom:16px;font-size:.62rem}
  .hero-cta{width:100%;justify-content:space-between}
}
@media (max-width:420px){
  .hero-banner{width:calc(100% - 22px)}
  .hero-mosaic{height:220px}
}

.hero-banner{border-radius:38px;background:var(--surface)}
.hero-eyebrow{color:var(--accent)}
.hero-mosaic{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;gap:12px;transform:rotate(-2deg)}
.hero-tile-main{grid-row:auto}
.hero-tile:nth-child(2){transform:translateY(28px)}
.hero-tile:nth-child(3){transform:translateY(-18px)}
.hero-cta{border-radius:999px;background:linear-gradient(135deg,var(--accent-2),var(--accent))}
@media (min-width:1000px){
  .csha-recommend-content:not(.csha-recommend-content-hot){grid-template-columns:repeat(2,minmax(0,1fr))}
  .csha-recommend-content:not(.csha-recommend-content-hot) .csha-game-item a{display:grid;grid-template-columns:150px minmax(0,1fr)}
  .csha-recommend-content:not(.csha-recommend-content-hot) .csha-game-cover,.csha-recommend-content:not(.csha-recommend-content-hot) .csha-game-cover img{height:100%}
}