:root{
  --g:#18a66a;
  --g-dark:#087c4d;
  --dark:#202124;
  --muted:#69707a;
  --bg:#f6f7f8;
  --line:#e6e8eb;
  --white:#fff;
}

/* ========================================
   RESET
======================================== */

*{
  box-sizing:border-box;
  min-width:0;
  overflow-wrap:break-word;
  word-wrap:break-word;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  font-family:Arial,sans-serif;
  color:var(--dark);
  background:var(--bg);
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  display:block;
  max-width:100%;
}


/* ========================================
   COMMON
======================================== */

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

h1,
h2,
h3,
p{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}


/* ========================================
   HEADER
======================================== */

header{
  background:#fff;
  border-bottom:1px solid var(--line);
}

.nav{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  font-size:25px;
  font-weight:800;
  white-space:nowrap;
  flex-shrink:0;
}

.logo b{
  color:var(--g);
}

nav{
  display:flex;
  align-items:center;
  gap:28px;
  font-weight:600;
  font-size:14px;
}

nav a{
  transition:.2s;
}

nav a:hover{
  color:var(--g);
}


/* ========================================
   HERO
======================================== */

.hero{
  background:linear-gradient(
    135deg,
    #0d8b57,
    #1db574
  );

  color:#fff;
  padding:58px 20px;
  text-align:center;
}

.hero h1{
  font-size:42px;
  line-height:1.15;
  margin:0 0 14px;
}

.hero p{
  max-width:680px;
  margin:0 auto;
  color:#eafff4;
  line-height:1.7;
}


/* ========================================
   MAIN
======================================== */

main{
  padding:38px 0 50px;
}

.section{
  margin-bottom:40px;
}

.head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:17px;
}

.head h2{
  margin:0;
  font-size:23px;
  line-height:1.4;
}

.view{
  flex-shrink:0;
  font-size:14px;
  color:var(--g);
  font-weight:700;
}

.view:hover{
  color:var(--g-dark);
}


/* ========================================
   TOP RATED APPS
======================================== */

.featured{
  width:100%;
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:17px;
}

.feature{
  width:100%;
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  display:block;
  transition:
    transform .2s,
    border-color .2s,
    box-shadow .2s;
}

.feature:hover{
  border-color:#cfd8d4;
  transform:translateY(-2px);
  box-shadow:0 5px 18px rgba(0,0,0,.06);
}

/* ========================================
   TOP RATED APPS IMAGE
   保持原本排版，只优化图片适应框
======================================== */

.cover{
  position:relative;

  width:100%;
  height:110px; /* 控制图片框高度 */

  margin:0;
  padding:0;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #0d8b57,
      #51d293
    );

  line-height:0;

  display:flex;
  align-items:center;
  justify-content:center;
}

.cover img{
  display:block;

  width:100%;
  height:100%;

  max-width:100%;
  max-height:100%;

  margin:0;
  padding:0;

  object-fit:cover;
  object-position:center;

  border:0;
}

/* ========================================
   FEATURE BODY
======================================== */

.body{
  width:100%;
  min-width:0;
  padding:17px;
}

.body h3{
  margin:0 0 7px;
  font-size:16px;
  line-height:1.45;
  font-weight:700;
}

.body p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}


/* ========================================
   LONG TITLE
======================================== */

.title{
  display:block;

  width:100%;
  max-width:100%;
  min-width:0;

  margin:0;

  line-height:1.45;

  white-space:normal;

  overflow-wrap:anywhere;
  word-break:break-word;
}


/* ========================================
   GENERAL GRID
======================================== */

.grid{
  width:100%;
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:17px;
}


/* ========================================
   APP / GAME CARD
======================================== */

.card{
  width:100%;
  min-width:0;

  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;

  padding:17px;

  display:flex;
  align-items:flex-start;

  gap:14px;

  overflow:hidden;

  transition:
    transform .2s,
    border-color .2s;
}

.card:hover{
  border-color:#cfd8d4;
  transform:translateY(-1px);
}


/* ========================================
   APP / GAME ICON
======================================== */

.icon{
  width:68px;
  height:68px;

  min-width:68px;
  min-height:68px;

  flex:0 0 68px;

  border-radius:14px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #dff8ec,
      #a6e6c6
    );

  display:flex;
  align-items:center;
  justify-content:center;

  color:#087c4d;
  font-weight:800;
  font-size:21px;
}

.icon img{
  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:cover;

  display:block;
}


/* ========================================
   CARD INFO
======================================== */

.info{
  flex:1 1 auto;

  width:0;
  min-width:0;
  max-width:100%;

  overflow:hidden;
}

.info h3{
  width:100%;
  max-width:100%;

  margin:1px 0 5px;

  font-size:16px;
  line-height:1.4;

  white-space:normal;

  overflow-wrap:anywhere;
  word-break:break-word;
}

.meta{
  width:100%;
  max-width:100%;

  font-size:12px;
  line-height:1.5;

  color:var(--muted);

  margin-bottom:7px;

  overflow-wrap:anywhere;
  word-break:break-word;
}

.desc{
  width:100%;
  max-width:100%;

  font-size:13px;
  line-height:1.6;

  color:#555;

  overflow-wrap:anywhere;
  word-break:break-word;
}


/* ========================================
   LIST
======================================== */

.list{
  width:100%;

  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;
}

.list a{
  width:100%;
  min-width:0;

  background:#fff;

  border:1px solid var(--line);
  border-radius:8px;

  padding:15px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  overflow:hidden;

  transition:
    border-color .2s,
    transform .2s;
}

.list a:hover{
  border-color:var(--g);
  transform:translateY(-1px);
}

.list a strong{
  min-width:0;
  max-width:100%;

  overflow-wrap:anywhere;
  word-break:break-word;
}


/* ========================================
   TAG
======================================== */

.tag{
  flex-shrink:0;

  color:#087c4d;

  background:#e8f8f0;

  border-radius:20px;

  padding:3px 8px;

  font-size:11px;

  white-space:nowrap;
}


/* ========================================
   FOOTER
======================================== */

footer{
  background:#fff;

  border-top:1px solid var(--line);

  padding:28px 0;

  color:var(--muted);

  font-size:13px;
}

.foot{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;
}

.links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.links a{
  transition:.2s;
}

.links a:hover{
  color:var(--g);
}


/* ========================================
   PREVENT LONG CONTENT
======================================== */

pre,
code{
  max-width:100%;

  white-space:pre-wrap;

  overflow-wrap:anywhere;
  word-break:break-word;
}

table{
  max-width:100%;
  width:100%;
  table-layout:fixed;
}

input,
button,
textarea,
select{
  max-width:100%;
}

/* ========================================
TABLET
======================================== */

@media(max-width:850px){

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

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

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

}


/* ========================================
MOBILE
======================================== */

@media(max-width:600px){

  .wrap{
    padding:0 10px;
  }

  nav{
    display:none;
  }

  .hero{
    padding:40px 10px;
  }

  .hero h1{
    font-size:25px;
  }

  .hero p{
    font-size:14px;
  }


  /* ========================================
     TOP RATED APPS
     手机保持原来的单列
  ======================================== */

  .featured{
    grid-template-columns:1fr;
  }

  .cover{
    height:110px;    /* 控制手机图片框高度 */
    min-height:100px;   /* 控制手机图片高度 */
    max-height:100px;   /* 控制手机图片长度 */
  }


  /* ========================================
     LATEST APPS
     NEW PUBLISH GAMES
     手机一行3个
  ======================================== */

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

    gap:6px;
  }


  /* ========================================
     CARD MOBILE
  ======================================== */

  .card{
    padding:8px;
    display:block;
  }

  .icon{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;

    min-width:0;
    min-height:0;

    margin-bottom:7px;

    border-radius:9px;
  }

  .icon img{
    width:100% !important;
    height:100% !important;
    object-fit:cover;
  }

  .info{
    width:100%;
  }

  .info h3{
    font-size:12px;
    line-height:1.35;

    margin:0 0 4px;
  }

  .meta{
    font-size:10px;
    line-height:1.4;
    margin-bottom:0;
  }

  .desc{
    font-size:10px;
    line-height:1.4;
  }


  /* ========================================
     LIST
  ======================================== */

  .list{
    grid-template-columns:1fr;
  }


  /* ========================================
     FOOTER
  ======================================== */

  .foot{
    display:block;
  }

  .links{
    margin-top:12px;
  }

}