.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:40px;background:linear-gradient(135deg,#fff5ee,var(--surface));box-shadow:0 20px 60px rgba(255,182,150,.2)}
.hero-banner::before{content:"";position:absolute;inset:auto -12% -45% auto;width:420px;height:420px;border:70px solid rgba(255,107,107,.15);border-radius:50%;opacity:.6}
.hero-banner::after{content:"";position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:linear-gradient(135deg,rgba(78,205,196,.2),rgba(167,139,250,.15));border-radius:50%;filter:blur(40px)}
.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(--accent);border-radius:999px;color:var(--accent);font-size:.72rem;font-weight:900;letter-spacing:.14em;background:rgba(255,107,107,.08);box-shadow:0 4px 12px rgba(255,107,107,.1)}
.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,#ff6b6b,#ff8e8e);-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:16px;background:linear-gradient(135deg,#ff6b6b,#ff8e8e);color:var(--button-ink);font-size:.9rem;font-weight:900;text-decoration:none;box-shadow:0 10px 28px rgba(255,107,107,.35);transition:all .3s ease}
.hero-cta:hover{transform:translateY(-3px);background:linear-gradient(135deg,#4ecdc4,#7eddd6);box-shadow:0 14px 36px rgba(78,205,196,.4)}
.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:4px solid var(--surface);border-radius:28px;background:var(--surface-soft);box-shadow:0 18px 40px rgba(255,182,150,.2);transition:all .35s cubic-bezier(.4,0,.2,1)}
.hero-tile:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 24px 50px rgba(255,107,107,.25);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:28px;gap:30px}
  .hero-banner h1{font-size:clamp(2.7rem,15vw,4.4rem)}
  .hero-mosaic{height:250px;gap:9px}
  .hero-tile{border-width:3px;border-radius:20px}
  .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}
}

@media (min-width:1100px){
  .hero-banner{grid-template-columns:minmax(0,.88fr) minmax(400px,1.12fr);min-height:520px;border-radius:40px;margin:34px auto 52px;width:min(1200px,calc(100% - 40px));padding:56px}
  .hero-mosaic{height:400px;transform:rotate(1deg)}
  .csha-recommend-content-hot{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:150px}
  .csha-recommend-content-hot .csha-game-item:first-child{grid-column:span 2;grid-row:span 2}
  .csha-recommend-content-hot .csha-game-item:first-child .csha-game-cover-recommend,.csha-recommend-content-hot .csha-game-item:first-child img{height:100%}
  .csha-recommend-content{grid-template-columns:repeat(4,minmax(0,1fr))}
}