/* Maiwar Game Studio — home page only */

/* ---------- hero ---------- */
.h-hero { position: relative; background: var(--hero-bg); color: var(--hero-ink); padding: 56px 0 120px; overflow: hidden; }
.h-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 78% 46%, transparent 0 210px, rgba(255, 255, 255, .13) 211px 213px, transparent 214px 270px, rgba(255, 255, 255, .1) 271px 273px, transparent 274px 340px, rgba(255, 255, 255, .07) 341px 343px, transparent 344px);
}
.h-hero__grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 40px; }
.h-pill { display: inline-block; background: rgba(255, 255, 255, .9); color: var(--st-night); font-weight: 800; font-size: 14.5px; padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(14, 26, 43, .12); }
.h-hero h1 { font-family: var(--st-head); font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 1; letter-spacing: -.5px; margin: 20px 0 26px; }
.h-wave { color: #fff; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5 Q 5 0 10 5 T 20 5 T 30 5 T 40 5' fill='none' stroke='%23ff8a3d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 34px 9px; padding-bottom: 8px; text-shadow: 0 3px 0 rgba(14, 26, 43, .18); }
.h-lead { font-size: 1.2rem; line-height: 1.55; color: var(--hero-muted); max-width: 33em; margin: 0 0 28px; font-weight: 600; }
.h-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.h-hero__art { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; }
.h-mascot { width: 100%; height: 100%; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 26px 60px rgba(14, 26, 43, .32); object-fit: cover; }
.h-chip { position: absolute; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 24px; background: #fff; border: 4px solid #fff; box-shadow: 0 14px 30px rgba(14, 26, 43, .28); font-size: 46px; animation: h-bob 5s ease-in-out infinite; }
.h-chip--s { left: -18px; top: 8%; transform: rotate(-8deg); }
.h-chip--b { right: -20px; bottom: 14%; transform: rotate(7deg); animation-delay: -1.6s; }
.h-chip--r { left: 6%; bottom: -6px; width: 76px; height: 76px; font-size: 40px; border-radius: 50%; background: var(--st-sun); border-color: #fff; animation-delay: -3s; }
@keyframes h-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.h-river { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; color: var(--st-cream); }
.h-river path { fill: currentColor; }

/* ---------- section titles ---------- */
.h-sec { padding: 40px 0 80px; }
.h-kicker { margin: 0 0 6px; text-align: center; font-weight: 900; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--st-teal-deep); }
.h-title { font-family: var(--st-head); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08; text-align: center; margin: 0 0 10px; }
.h-sub { text-align: center; color: var(--muted); margin: 0 auto 40px; max-width: 560px; font-size: 1.1rem; }

/* ---------- game cards ---------- */
.h-game { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 28px; border-radius: 32px; padding: 44px 48px 0; margin-bottom: 28px; overflow: hidden; }
.h-game__text { padding-bottom: 44px; }
.h-game__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.h-game__head img { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); flex: none; }
.h-game__tag { display: inline-block; font-size: 12.5px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.h-game h3 { margin: 6px 0 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.1; }
.h-game p { margin: 0 0 16px; font-size: 1.08rem; }
.h-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; }
.h-chips li { font-size: 14.5px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.h-game__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.h-game__btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; text-decoration: none; padding: 13px 24px; border-radius: 999px; transition: transform .15s; }
.h-game__btn:hover { transform: translateY(-2px); }
.h-game__shots { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 16px; align-self: end; }
.h-game__shots img { width: 46%; max-width: 230px; border-radius: 26px 26px 0 0; border: 6px solid rgba(255, 255, 255, .9); border-bottom: 0; box-shadow: 0 -6px 30px rgba(0, 0, 0, .15); }
.h-game__shots img:first-child { margin-bottom: -40px; }

.h-game--sudoku { background: radial-gradient(700px 360px at 90% 0%, #cfe2ff 0%, transparent 60%), linear-gradient(180deg, #eaf3ff, #fff); color: #102043; font-family: 'Nunito', sans-serif; box-shadow: 0 16px 40px rgba(21, 101, 232, .12), inset 0 0 0 2px #dbe8fd; }
.h-game--sudoku h3 { font-weight: 900; }
.h-game--sudoku p { color: #55627d; }
.h-game--sudoku .h-game__tag { background: #fff4d1; color: #7a5300; }
.h-game--sudoku .h-chips li { background: #fff; color: #1565e8; box-shadow: inset 0 0 0 2px #d6e5ff; }
.h-game--sudoku .h-game__btn { background: #1565e8; color: #fff; box-shadow: 0 8px 20px rgba(21, 101, 232, .3); }

.h-game--block { background: radial-gradient(700px 380px at 90% 0%, rgba(255, 79, 126, .35), transparent 60%), linear-gradient(135deg, #3a1f8f 0%, #1b0f45 100%); color: #fff; font-family: 'Fredoka', sans-serif; box-shadow: 0 16px 40px rgba(27, 15, 69, .3); }
.h-game--block h3 { font-weight: 700; }
.h-game--block p { color: #cfc6f2; }
.h-game--block .h-game__tag { background: rgba(255, 214, 107, .18); color: #ffd66b; font-weight: 600; }
.h-game--block .h-chips li { background: rgba(255, 255, 255, .08); color: #ffd66b; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.h-game--block .h-game__btn { background: linear-gradient(180deg, #ff6b93, #ff4f7e); color: #fff; font-weight: 600; box-shadow: 0 5px 0 #e03466, 0 12px 24px rgba(255, 79, 126, .3); }
.h-game--block .h-game__shots img { border-color: rgba(255, 255, 255, .22); }

/* coming soon */
.h-soon { position: relative; display: flex; align-items: center; gap: 22px; padding: 30px 36px 46px; border-radius: 28px; background: var(--st-night); color: #fff; overflow: hidden; }
.h-soon::after { content: ''; position: absolute; left: 0; right: 0; bottom: 18px; height: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 34px, transparent 34px 60px); }
.h-soon__emoji { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--st-sun); font-size: 44px; }
.h-soon .h-game__tag { background: rgba(46, 196, 182, .18); color: var(--st-teal); }
.h-soon h3 { font-family: var(--st-head); font-size: 1.7rem; font-weight: 800; line-height: 1.15; margin: 6px 0 4px; }
.h-soon p { margin: 0 0 14px; color: #b9c6d8; }

/* ---------- about ---------- */
.h-about { background: #fff; padding: 76px 0; }
.h-about__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.h-about .h-kicker, .h-about .h-title { text-align: left; }
.h-about p { color: var(--muted); font-size: 1.1rem; margin: 0 0 14px; }
.h-about p b { color: var(--ink); }
.h-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.h-stats li { background: var(--st-cream); border-radius: 22px; padding: 22px 20px; box-shadow: inset 0 0 0 2px #f3e6d2; }
.h-stats b { display: block; font-family: var(--st-head); font-size: 2.6rem; line-height: 1; color: var(--st-teal-deep); }
.h-stats li:nth-child(2) b { color: var(--st-river); }
.h-stats li:nth-child(3) b { color: #d9632a; }
.h-stats li:nth-child(4) b { color: #c23a74; }
.h-stats span { display: block; margin-top: 6px; font-weight: 800; color: var(--muted); }

/* ---------- contact ---------- */
.h-contact { padding: 70px 0 64px; }
.h-contact__card { display: flex; align-items: center; gap: 26px; padding: 34px 40px; border-radius: 30px; background: var(--hero-bg); color: var(--st-night); box-shadow: 0 18px 40px rgba(11, 125, 117, .25); }
.h-contact__card img { width: 104px; height: 104px; border-radius: 50%; border: 5px solid #fff; flex: none; }
.h-contact__card h2 { font-family: var(--st-head); font-size: 2.1rem; font-weight: 800; line-height: 1.05; margin: 0 0 6px; }
.h-contact__card p { margin: 0; color: rgba(14, 26, 43, .8); font-weight: 600; }
.h-contact__card .st-btn { margin-left: auto; flex: none; }
.h-follow { margin-top: 8px !important; font-size: 15px; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .h-hero { padding: 36px 0 110px; }
  .h-hero::before { background: none; }
  .h-hero__grid { grid-template-columns: 1fr; text-align: center; gap: 44px; }
  .h-lead { margin-left: auto; margin-right: auto; }
  .h-hero__btns { justify-content: center; }
  .h-hero__art { width: min(78%, 340px); }
  .h-game { grid-template-columns: 1fr; padding: 32px 28px 0; text-align: center; }
  .h-game__text { padding-bottom: 8px; }
  .h-game__head { flex-direction: column; gap: 10px; }
  .h-chips, .h-game__cta { justify-content: center; }
  .h-game__cta .st-stores { justify-content: center; }
  .h-about__grid { grid-template-columns: 1fr; gap: 30px; }
  .h-contact__card { flex-direction: column; text-align: center; padding: 32px 24px; }
  .h-contact__card .st-btn { margin: 4px 0 0; }
}

@media (max-width: 560px) {
  .h-hero h1 { font-size: 2.55rem; }
  .h-lead { font-size: 1.08rem; }
  .h-chip { width: 66px; height: 66px; border-radius: 18px; font-size: 34px; }
  .h-chip--s { left: -14px; }
  .h-chip--b { right: -14px; }
  .h-chip--r { width: 56px; height: 56px; font-size: 30px; }
  .h-sec { padding: 28px 0 56px; }
  .h-game { padding: 26px 18px 0; border-radius: 26px; }
  .h-game__shots img { border-width: 4px; border-radius: 20px 20px 0 0; }
  .h-soon { flex-direction: column; text-align: center; padding: 28px 20px 40px; }
  .h-about { padding: 56px 0; }
  .h-stats b { font-size: 2.1rem; }
  .h-contact__card h2 { font-size: 1.8rem; }
  .h-contact__card .st-btn { font-size: 15px; padding: 12px 18px; }
}

/* ---------- 404 ---------- */
.h-404 { text-align: center; padding: 64px 0 130px; }
.h-404::before { background: radial-gradient(circle at 50% 120px, transparent 0 100px, rgba(255, 255, 255, .13) 101px 103px, transparent 104px 150px, rgba(255, 255, 255, .1) 151px 153px, transparent 154px); }
.h-404__mascot { position: relative; width: 160px; height: 160px; margin: 0 auto; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 18px 40px rgba(14, 26, 43, .3); }
.h-404 .h-lead { margin: 0 auto 26px; }
.h-404 .h-hero__btns { justify-content: center; }
.h-404__gap { height: 40px; }