/* ============ 果酱游戏厅（Minecraft 奶油风） ============ */
:root{
  --cream:#fff7e9; --cream-2:#f7edda; --cream-lo:#e6d8bf; --cream-hi:#fffdf8;
  --brown:#8a7358; --brown-d:#5b4a38; --ink:#5b4a38;
  --green:#79bb48; --green-d:#5f9d33; --wood:#cba36d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);min-height:100vh;
  background:#cfe6f2 url("assets/orchard_bg.png") center top/cover no-repeat fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

.h-top{
  height:58px;display:flex;align-items:center;padding:0 24px;
  background:rgba(255,251,243,.86);backdrop-filter:blur(8px);
  border-bottom:3px solid rgba(138,115,88,.5);
}
.h-logo{font-weight:800;font-size:16px;letter-spacing:.5px;color:var(--brown-d)}
.h-logo span{opacity:.5;margin:0 2px}

.h-wrap{max-width:1080px;margin:0 auto;padding:36px 24px 72px}
.h-title{
  text-align:center;font-size:clamp(34px,6vw,54px);margin:0 0 6px;color:#fff;font-weight:900;letter-spacing:4px;
  text-shadow:3px 3px 0 var(--brown-d),-3px 3px 0 var(--brown-d),3px -3px 0 var(--brown-d),-3px -3px 0 var(--brown-d),
              0 10px 20px rgba(90,70,45,.30);
}
.h-note{text-align:center;margin:0 0 30px;font-size:13px;font-weight:700;color:#fff;
  text-shadow:1.5px 1.5px 0 rgba(91,74,56,.95),-1px -1px 0 rgba(91,74,56,.6),0 3px 8px rgba(91,74,56,.45)}

.h-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}

.h-card{
  display:flex;flex-direction:column;background:var(--cream);
  border:3px solid var(--brown);border-radius:0;
  box-shadow:inset 3px 3px 0 var(--cream-hi), inset -3px -3px 0 var(--cream-lo), 0 8px 0 rgba(110,88,60,.20);
  overflow:hidden;transition:transform .12s ease, box-shadow .12s ease;
}
a.h-card:hover{transform:translateY(-4px);box-shadow:inset 3px 3px 0 var(--cream-hi), inset -3px -3px 0 var(--cream-lo), 0 12px 0 rgba(110,88,60,.24)}
a.h-card:active{transform:translateY(0)}

.h-thumb{position:relative;aspect-ratio:16/9;background:#8fb7d6;border-bottom:3px solid var(--brown);overflow:hidden}
.h-thumb img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.h-thumb.ph{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#efe6d5,#efe6d5 12px,#e7dcc7 12px,#e7dcc7 24px)}
.h-thumb.ph span{font-weight:800;color:#b9a88e;letter-spacing:3px;font-size:18px}

.h-info{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;position:relative}
.h-info h2{margin:0;font-size:22px;letter-spacing:1px;color:var(--brown-d)}
.h-info p{margin:0;font-size:14px;color:#7a6852}
.h-tag{
  position:absolute;top:-14px;right:14px;background:var(--green);color:#fff;font-size:12px;font-weight:800;
  padding:3px 10px;border:3px solid #4b7f27;box-shadow:0 3px 0 rgba(75,127,39,.35);letter-spacing:1px;
}
.h-tag.new{background:#e2703a;border-color:#a94c1e;box-shadow:0 3px 0 rgba(169,76,30,.35)}
.h-tag.soon-tag{background:#a99a83;border-color:#7a6b56;box-shadow:0 3px 0 rgba(122,107,86,.3)}
.h-play{margin-top:8px;font-weight:800;font-size:15px;color:var(--green-d);letter-spacing:1px}
.h-play.dim{color:#b9a88e}
.h-card.soon{opacity:.92}

.h-foot{
  margin-top:56px;padding:16px 18px;text-align:center;font-size:13px;color:#fff;
  background:rgba(91,74,56,.55);border:2px solid rgba(255,255,255,.18);border-radius:14px;
  backdrop-filter:blur(4px);
}
.h-foot a{color:#fff;margin:0 12px;text-shadow:1px 1px 0 rgba(91,74,56,.8)}
.h-foot a:hover{text-decoration:underline}
.h-foot div{margin-top:10px;color:rgba(255,255,255,.85);text-shadow:1px 1px 0 rgba(91,74,56,.7)}

@media (max-width:520px){
  .h-wrap{padding:24px 14px 56px}
  .h-grid{grid-template-columns:1fr;gap:18px}
}