/* ===== 找屎獵人 Shit Hunter · landing styles =============================
   Ports the design project's "meme poster / hard-shadow" look into a
   responsive static site. Desktop reference width 1180px; below 900px the
   hero stacks, the 3-col grids collapse to a single column. */

:root{
  --ink:#173A4A; --ink2:#16242B;
  --cream:#FFF6E4; --dot:#FFD98A;
  --gold1:#FFC85A; --gold2:#FFB02E; --gold-flat:#FFC23C; --gold-ink:#5A3A00;
  --cyan1:#5FD6EE; --cyan2:#2BA8CC;
  --pink1:#FF9EC0; --pink2:#FF6E9C;
  --card1:#EAF8FC; --card2:#FFF6F9; --card3:#FFFAF0;
  --dark1:#173142; --dark2:#13525F;
  --screens-bg:#FBF6EF; --screens-border:#F0E8DA;
  --foot-bg:#173A4A; --foot-ink:#9FB9C4;
  --wrap:1120px;
  --disp:Fredoka,"Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;
  --body:Nunito,"Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:var(--body); font-weight:600;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

@keyframes bobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.16);opacity:.55}}
@keyframes hitknock{0%{transform:translate(0,0) rotate(0)}22%{transform:translate(20px,-14px) rotate(11deg)}50%{transform:translate(-6px,3px) rotate(-5deg)}72%{transform:translate(4px,-1px) rotate(2deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes dmgpop{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}25%{opacity:1;transform:translate(-50%,-4px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* ---------- buttons ---------- */
.btn-gold{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
  background:linear-gradient(150deg,var(--gold1),var(--gold2)); color:var(--gold-ink);
  font-family:var(--disp); font-weight:600; font-size:15px; padding:12px 22px;
  border-radius:13px; box-shadow:0 6px 14px rgba(255,176,46,.4);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(255,176,46,.5)}

/* ---------- navbar ---------- */
.nav{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid #EEF4F6}
.nav-in{display:flex; align-items:center; gap:14px; max-width:var(--wrap); margin:0 auto; padding:14px 24px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:700; font-size:21px; color:var(--ink2)}
.brand img{width:38px; height:38px; border-radius:11px}
.nav-links{display:flex; align-items:center; gap:26px; margin-left:auto; font-weight:700; font-size:14.5px; color:#5E7C8A}
.nav-links a:hover{color:var(--cyan2)}
.nav .btn-gold{margin-left:6px}
.lang-seg{display:flex; gap:2px; background:#EEF4F6; border-radius:11px; padding:3px}
.lang-seg button{
  border:none; background:transparent; cursor:pointer; font-family:var(--body);
  font-weight:800; font-size:13px; color:#5E7C8A; padding:6px 10px; border-radius:8px; min-width:34px;
}
.lang-seg button.on{background:#fff; color:var(--ink2); box-shadow:0 2px 5px rgba(23,58,74,.12)}
.nav-burger{display:none}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--cream); overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(var(--dot) 2.4px,transparent 2.4px); background-size:24px 24px; opacity:.55}
.hero .sos{
  position:absolute; top:56px; right:-70px; transform:rotate(38deg); z-index:2;
  background:repeating-linear-gradient(45deg,#16242B 0 16px,var(--gold-flat) 16px 32px);
  color:#fff; font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:3px;
  padding:8px 90px; box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.hero-in{position:relative; display:flex; align-items:center; gap:30px; max-width:var(--wrap); margin:0 auto; padding:56px 24px 64px}
.hero-copy{flex:1; min-width:0}
.hero-badge{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--ink2); background:var(--gold-flat); padding:7px 15px; border-radius:999px}
.hero h1{font-family:var(--disp); font-weight:700; font-size:clamp(40px,7vw,66px); line-height:1.02; letter-spacing:-1.4px; margin:18px 0 0; color:var(--ink2)}
.hero-sub{font-size:clamp(17px,2.2vw,21px); line-height:1.5; color:#3A2E1E; font-weight:800; margin:18px 0 0; max-width:540px}
.hero-chips{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.chip-hard{font-size:14px; font-weight:800; color:var(--ink2); background:#fff; border:2.5px solid var(--ink2); padding:8px 15px; border-radius:999px; box-shadow:3px 3px 0 var(--ink2)}
/* store badges (official Apple / Google artwork) + coming-soon chip.
   The chip is a separate element above the badges — it never overlaps the
   official artwork (brand guidelines: no marks on top of the badge). */
.store-block{display:inline-flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:28px}
.soon-chip{
  display:inline-flex; align-items:center; align-self:flex-start; background:var(--pink2); color:#fff;
  font-size:11px; font-weight:900; padding:5px 12px; border-radius:999px; letter-spacing:.4px;
  box-shadow:0 3px 8px rgba(255,110,156,.5); white-space:nowrap;
}
.store-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.badge{display:inline-flex; text-decoration:none; cursor:not-allowed; transition:transform .15s}
.badge:hover{transform:translateY(-2px)}
.badge img{display:block; width:auto; -webkit-user-drag:none; user-select:none}
/* Apple's badge is tightly cropped; Google's carries a little built-in padding,
   so nudge it up a touch to read as the same visual height. */
.badge.ios img{height:52px}
.badge.play img{height:54px}

/* hero slime */
.hero-visual{position:relative; flex:none; width:340px; height:340px; display:flex; align-items:center; justify-content:center}
.hero-visual .burst{position:absolute; inset:0; background:var(--gold-flat); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.hero-visual .disc{position:absolute; width:244px; height:244px; border-radius:50%; background:var(--cream)}
.hero-visual .slime{position:relative; width:210px; height:auto; animation:bobble 2.6s ease-in-out infinite; filter:drop-shadow(0 14px 16px rgba(150,110,0,.32))}
.hero-visual .lv{position:absolute; top:16px; right:2px; background:var(--ink2); color:#fff; font-family:var(--disp); font-weight:700; font-size:14px; padding:7px 14px; border-radius:13px; transform:rotate(7deg); box-shadow:0 6px 12px rgba(0,0,0,.2)}

/* ---------- section shell ---------- */
.section{padding:76px 0}
.sec-head{text-align:center; max-width:640px; margin:0 auto 44px}
.sec-title{font-family:var(--disp); font-weight:700; font-size:clamp(28px,4vw,36px); letter-spacing:-.5px; margin:0; color:var(--ink2)}
.sec-sub{font-size:16px; color:#5E7C8A; font-weight:700; margin:14px 0 0; line-height:1.6}
.kicker{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:900; letter-spacing:.5px; color:var(--ink2); background:var(--gold-flat); padding:6px 14px; border-radius:999px; margin-bottom:16px}

/* ---------- features ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:var(--wrap); margin:0 auto}
.feat-card{border:2.5px solid var(--ink2); border-radius:22px; box-shadow:6px 6px 0 var(--ink2); padding:30px 26px 32px}
.feat-card.c1{background:var(--card1)} .feat-card.c2{background:var(--card2)} .feat-card.c3{background:var(--card3)}
.feat-ic{width:60px; height:60px; border-radius:18px; border:2.5px solid var(--ink2); box-shadow:3px 3px 0 var(--ink2); display:flex; align-items:center; justify-content:center; font-size:28px}
.feat-card.c1 .feat-ic{background:linear-gradient(150deg,var(--cyan1),var(--cyan2))}
.feat-card.c2 .feat-ic{background:linear-gradient(150deg,var(--pink1),var(--pink2))}
.feat-card.c3 .feat-ic{background:linear-gradient(150deg,#FFD27A,var(--gold2))}
.feat-card h3{font-family:var(--disp); font-weight:700; font-size:20px; margin:20px 0 8px; color:var(--ink2)}
.feat-card p{font-size:15px; line-height:1.62; color:#3E5560; font-weight:600; margin:0}

/* ---------- how it works ---------- */
.how{background:linear-gradient(160deg,#F4FBFD,#E8F6FA)}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:920px; margin:0 auto}
.step{text-align:center; position:relative}
.step-badge{position:relative; width:88px; height:88px; margin:0 auto 20px; border-radius:28px; background:#fff; border:2.5px solid var(--ink2); box-shadow:5px 5px 0 var(--ink2); display:flex; align-items:center; justify-content:center; font-size:38px}
.step-num{position:absolute; top:-8px; right:-8px; width:30px; height:30px; border-radius:50%; color:#fff; font-family:var(--disp); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; border:2.5px solid var(--ink2)}
.step:nth-child(1) .step-num{background:var(--cyan2)}
.step:nth-child(2) .step-num{background:var(--pink2)}
.step:nth-child(3) .step-num{background:var(--gold2)}
.step h3{font-family:var(--disp); font-weight:700; font-size:19px; margin:0 0 6px; color:var(--ink2)}
.step p{font-size:14.5px; line-height:1.6; color:#4E6B77; font-weight:600; margin:0}

/* ---------- app screens ---------- */
.screens{background:var(--screens-bg); border-top:1px solid var(--screens-border); border-bottom:1px solid var(--screens-border)}
.screen-row{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:var(--wrap); margin:0 auto; align-items:start}
.screen-item{text-align:center}
.screen-item .phone{border-radius:34px; overflow:hidden; filter:drop-shadow(0 22px 40px rgba(31,90,115,.22)); background:#fff; border:3px solid var(--ink2)}
.screen-item img{width:100%}
.screen-cap{margin-top:18px; font-family:var(--disp); font-weight:700; font-size:16px; color:var(--ink2)}
.screen-item.battle .screen-cap{color:var(--pink2)}
/* fallback (no screenshots): stylized feature phones */
.screen-fallback{display:flex; align-items:center; justify-content:center; aspect-ratio:9/17; background:linear-gradient(160deg,#fff,#F1FAFC); padding:26px}
.screen-fallback .big{font-size:64px; line-height:1}
.screen-fallback .fb-tx{margin-top:14px; font-family:var(--disp); font-weight:700; font-size:18px; color:var(--ink2)}

/* ---------- game mode (dark key-art) ---------- */
.game{position:relative; background:linear-gradient(155deg,#173142 0%,#13525F 100%); color:#fff; overflow:hidden}
.game::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 2px,transparent 2px); background-size:26px 26px}
.game-in{position:relative; display:flex; align-items:center; gap:48px; max-width:var(--wrap); margin:0 auto; padding:80px 24px}
.game-copy{flex:1; min-width:0}
.game .kicker{background:var(--gold-flat)}
.game h2{font-family:var(--disp); font-weight:700; font-size:clamp(32px,4.6vw,50px); line-height:1.08; margin:0 0 18px; letter-spacing:-.6px}
.game-desc{font-size:17px; line-height:1.6; color:#BFE0E8; font-weight:600; max-width:520px; margin:0 0 24px}
.class-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px}
.class-chip{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.18); border-radius:999px; padding:9px 16px; font-weight:800; font-size:14px}
.game .btn-gold{font-size:16px; padding:14px 26px}

/* boss */
.boss{position:relative; flex:none; width:360px; display:flex; flex-direction:column; align-items:center; gap:16px}
.boss-hp{width:100%; max-width:300px}
.boss-hp .hp-top{display:flex; justify-content:space-between; font-size:12px; font-weight:800; color:#BFE0E8; margin-bottom:6px}
.boss-hp .hp-bar{height:12px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden}
.boss-hp .hp-fill{height:100%; width:84%; border-radius:999px; background:linear-gradient(90deg,#FF6E9C,#FF3B6B)}
.boss-stage{position:relative; width:280px; height:280px; display:flex; align-items:center; justify-content:center}
.boss-glow{position:absolute; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle,rgba(255,110,156,.55),transparent 70%); animation:pulse 2.8s ease-in-out infinite}
.boss-slime{position:relative; width:220px; height:auto; cursor:pointer; filter:drop-shadow(0 16px 22px rgba(0,0,0,.35)); animation:bobble 2.6s ease-in-out infinite; user-select:none; -webkit-user-select:none}
.boss-slime.hit{animation:hitknock .5s ease}
.dmg{position:absolute; left:50%; top:34%; transform:translate(-50%,0); font-family:var(--disp); font-weight:700; font-size:34px; color:#FFE066; text-shadow:0 3px 8px rgba(0,0,0,.4); pointer-events:none; animation:dmgpop .8s ease forwards}
.boss-meta{font-family:var(--disp); font-weight:700; font-size:15px; color:#fff}
.boss-tap{font-size:13px; font-weight:800; color:var(--gold-flat)}

/* ---------- CTA ---------- */
.cta{position:relative; background:linear-gradient(150deg,var(--cyan1),var(--cyan2)); color:#fff; text-align:center; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.16) 2px,transparent 2px); background-size:24px 24px}
.cta-in{position:relative; max-width:var(--wrap); margin:0 auto; padding:72px 24px}
.cta .slime{width:120px; height:auto; margin:0 auto 20px; animation:bobble 2.6s ease-in-out infinite; filter:drop-shadow(0 12px 16px rgba(0,80,110,.35))}
.cta h2{font-family:var(--disp); font-weight:700; font-size:clamp(28px,4vw,36px); margin:0 0 10px}
.cta p{font-size:18px; font-weight:800; color:#EAFAFF; margin:0 0 26px}
.cta .store-block{align-items:center}
.cta .store-row{justify-content:center}

/* ---------- footer ---------- */
.footer{background:var(--foot-bg); color:var(--foot-ink)}
.footer-in{max-width:var(--wrap); margin:0 auto; padding:44px 24px 36px}
.footer-top{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
.footer .brand{color:#fff; font-size:19px}
.footer .brand img{width:32px; height:32px; border-radius:9px}
.footer-tag{color:var(--foot-ink); font-size:14px; font-weight:700; margin:12px 0 0}
.footer-links{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; font-weight:700}
.footer-links a{color:#BFE0E8}
.footer-links a:hover{color:#fff}
.footer-meta{margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; font-weight:700}
.footer-meta a{color:#BFE0E8; text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:18px; background:#fff; padding:20px 24px; border-bottom:1px solid #EEF4F6; margin:0}
  .nav-burger{display:inline-flex; margin-left:auto; align-items:center; justify-content:center; width:40px; height:40px; border:none; background:#EEF4F6; border-radius:11px; cursor:pointer; font-size:20px}
  .nav .btn-gold{display:none}
  .hero-in{flex-direction:column; text-align:center; padding-top:44px}
  .hero-copy{order:2}
  .hero-visual{order:1; width:280px; height:280px}
  .hero-visual .disc{width:210px; height:210px}
  .hero-visual .slime{width:180px}
  .hero-sub,.hero h1{margin-left:auto; margin-right:auto}
  .hero-chips,.store-row{justify-content:center}
  .hero .store-block{align-items:center}
  .feat-grid{grid-template-columns:1fr; max-width:440px}
  .how-grid{grid-template-columns:1fr; max-width:360px; gap:36px}
  .screen-row{grid-template-columns:1fr; max-width:340px; gap:48px}
  .game-in{flex-direction:column; text-align:center; padding:64px 24px}
  .game-desc{margin-left:auto; margin-right:auto}
  .class-row{justify-content:center}
  .boss{width:100%}
  .footer-top{flex-direction:column}
}
@media (max-width:480px){
  .wrap,.hero-in,.nav-in,.game-in,.cta-in,.footer-in{padding-left:18px; padding-right:18px}
  .hero .sos{right:-90px; padding:8px 100px}
  .badge.ios img{height:46px}
  .badge.play img{height:48px}
}