/* Minecraft-inspired lightweight theme + mobile safe-area fixes.
   No external assets; icons shipped as local SVGs under ./icons/. */

:root{
  --mc-safe-top: env(safe-area-inset-top, 0px);
  --mc-safe-bottom: env(safe-area-inset-bottom, 0px);

  --mc-bg: #0f1310;
  --mc-panel: rgba(20, 26, 22, 0.88);
  --mc-panel-solid: #141a16;
  --mc-text: rgba(255,255,255,0.92);
  --mc-muted: rgba(255,255,255,0.70);
  --mc-accent: #57b13a; /* grass-ish */
  --mc-accent-2: #2e7d32;
  --mc-border: rgba(0,0,0,0.55);
  --mc-shadow: rgba(0,0,0,0.35);

  --mc-radius: 10px;
  --mc-radius-sm: 8px;
  --mc-footer-h: 1.6972972973rem; /* matches common.css */
  --mc-topbar-h: 48px; /* matches index.css */
}

html, body{
  background-color: var(--mc-bg) !important;
  color: var(--mc-text) !important;
}

/* Subtle blocky background without images */
body{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:
    100% 100%,
    18px 18px,
    18px 18px;
  background-position: 0 0, 0 0, 0 0;

  /* Prevent fixed footer from covering content on phones */
  padding-bottom: calc(var(--mc-footer-h) + var(--mc-safe-bottom)) !important;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  letter-spacing: 0.2px;
}

/* Top fixed bar safe-area */
.top1{
  height: calc(var(--mc-topbar-h) + var(--mc-safe-top)) !important;
  padding-top: var(--mc-safe-top) !important;
  background-color: var(--mc-panel) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  z-index: 20 !important;
}
.top{
  height: calc(var(--mc-topbar-h) + var(--mc-safe-top)) !important;
}

/* Panels / cards */
.index-middle-body{
  background-color: transparent !important;
}
.platform{
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.platform-title-text{
  color: var(--mc-text) !important;
}
.platform-title-intro,
.platform-title-intro1,
.platform-title-intro2{
  color: var(--mc-muted) !important;
}
.top-text-notice{
  color: var(--mc-muted) !important;
}

/* Search bar */
div.searchDiv{
  background-color: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08);
}
div.searchDiv input{
  color: var(--mc-text) !important;
}
div.searchDiv button{
  background-color: var(--mc-accent-2) !important;
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
}

/* Primary pill buttons -> blocky Minecraft button */
.platform-buttont,
.platform-buttont1,
.shareBtn,
.hongbao-body-b1,
.hongbao-body-b2,
.wxhd_wc_an,
.wxhd_wc_an2{
  border-radius: var(--mc-radius-sm) !important;
  background: linear-gradient(180deg, #66c64a, #3a8d2b) !important;
  color: #0b120a !important;
  border: 2px solid rgba(0,0,0,0.45) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35) !important;
  font-weight: 800 !important;
}

/* Footer safe-area + theme */
.footer{
  height: calc(var(--mc-footer-h) + var(--mc-safe-bottom)) !important;
  padding-bottom: calc(0.1351351351rem + var(--mc-safe-bottom)) !important;
  background-color: var(--mc-panel) !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 30 !important;
  backdrop-filter: blur(10px);
}
.navbar-desc{
  color: rgba(255,255,255,0.65) !important;
}
.navbar-desc.s{
  color: #b7ff9a !important;
}

/* Replace bottom navbar icons with local pixel-ish SVGs */
.navbar-icon{
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35));
}
.icon-index{ background-image: url("./icons/home.svg") !important; }
.icon-index.s{ background-image: url("./icons/home-active.svg") !important; }
.icon-recommend{ background-image: url("./icons/agent.svg") !important; }
.icon-recommend.s{ background-image: url("./icons/agent-active.svg") !important; }
.icon-read{ background-image: url("./icons/user.svg") !important; }
.icon-read.s{ background-image: url("./icons/user-active.svg") !important; }

/* Floating right nav: keep above footer + safe-area */
.right_nav{
  bottom: calc(140px + var(--mc-safe-bottom)) !important;
  z-index: 40 !important;
}
.right_nav li{
  background: rgba(20,26,22,0.85) !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 18px var(--mc-shadow);
}
.right_nav li img{
  width: 34px !important;
  height: 34px !important;
  image-rendering: pixelated;
}
.right_nav li .iconBox{
  min-width: 52px;
  min-height: 52px;
  justify-content: center !important;
}

/* "More" button container (#dg) is hardcoded fixed at top:80% in template.
   Override to anchor above footer on mobile. */
#dg{
  top: auto !important;
  bottom: calc(var(--mc-footer-h) + 16px + var(--mc-safe-bottom)) !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 50 !important;
}
#More img{
  width: 96px;
  height: 32px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.25));
}

/* Modal masks should always cover everything */
.add-to-desk-mask,
.get-hongbao,
.mask,
.load,
.video{
  z-index: 1000 !important;
}

@media (prefers-color-scheme: light){
  :root{
    --mc-bg: #e7efe6;
    --mc-panel: rgba(245, 248, 245, 0.92);
    --mc-panel-solid: #f5f8f5;
    --mc-text: rgba(22, 28, 24, 0.92);
    --mc-muted: rgba(22, 28, 24, 0.65);
    --mc-border: rgba(0,0,0,0.18);
    --mc-shadow: rgba(0,0,0,0.10);
  }
  body{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.35), rgba(0,0,0,0.05)),
      linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px),
      linear-gradient(0deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  }
  .platform-title-text{ color: var(--mc-text) !important; }
  .navbar-desc{ color: rgba(22,28,24,0.65) !important; }
}