/* ===========================
   MINESITE — download.css
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg:          #060b06;
  --bg-2:        #0d160d;
  --bg-3:        #131f13;
  --bg-card:     #0f1a0f;
  --bg-elevated: #172417;
  --border:      #1f3320;
  --border-2:    #2e5030;
  --border-focus:#4ade80;
  --green:       #4ade80;
  --green-dim:   #34c265;
  --green-muted: #2a9e52;
  --green-glow:  rgba(74,222,128,0.18);
  --green-soft:  rgba(74,222,128,0.08);
  --gold:        #f59e0b;
  --cyan:        #06b6d4;
  --text:        #e2f0e2;
  --text-2:      #9dbe9d;
  --text-3:      #5e7e5e;
  --text-inv:    #060b06;
  --danger:      #f87171;
  --star:        #f59e0b;
  --sans:        'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:        'DM Mono', 'Courier New', monospace;
  --pixel:       'Press Start 2P', cursive;
  --radius:      6px;
  --radius-lg:   12px;
  --dur-fast:    0.15s;
  --dur-base:    0.22s;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --transition:  all var(--dur-base) var(--ease);
  --shadow:      0 8px 32px rgba(0,0,0,0.6);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x: hidden; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    linear-gradient(rgba(74,222,128,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,0.018) 1px, transparent 1px);
  background-size: 32px 32px;
}

.pixel { font-family: var(--pixel); letter-spacing:0.05em; }
.container { max-width:1100px; margin:0 auto; padding:0 1.5rem; width:100%; }

.skip-link {
  position:absolute; top:-40px; left:0;
  background:var(--green); color:var(--bg);
  padding:8px 16px; font-weight:700; text-decoration:none; z-index:300;
}
.skip-link:focus { top:0; }

/* ══════════════════════
   HEADER
══════════════════════ */
.site-header {
  position:sticky; top:0; z-index:200;
  background:rgba(6,11,6,0.9); backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.nav-container {
  display:flex; align-items:center;
  justify-content:space-between; height:68px; gap:1rem;
}
.logo {
  display:flex; align-items:center; gap:0.7rem;
  text-decoration:none; flex-shrink:0; transition:var(--transition);
}
.logo-icon-svg {
  width:34px; height:34px; flex-shrink:0;
  border-radius:8px; border:1px solid var(--border-2);
}
.logo-text {
  font-family:var(--pixel); font-size:0.65rem;
  color:var(--green); letter-spacing:0.1em;
  text-shadow:0 0 16px rgba(74,222,128,0.55);
  transition:color var(--dur-base) var(--ease);
}
.logo:hover .logo-text { color:#b9f5d0; }
.main-nav ul { display:flex; gap:1.5rem; list-style:none; align-items:center; }
.main-nav a {
  font-family:var(--sans); font-size:0.875rem; font-weight:500;
  color:var(--text-2); text-decoration:none; letter-spacing:0.01em;
  transition:color var(--dur-base) var(--ease);
  position:relative; padding-bottom:2px;
}
.main-nav a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px; background:var(--green); border-radius:1px;
  transition:width var(--dur-base) var(--ease);
}
.main-nav a:hover        { color:var(--text); }
.main-nav a:hover::after { width:100%; }
.main-nav a.active       { color:var(--green); }
.main-nav a.active::after { width:100%; }
.nav-cta {
  background:var(--green-soft) !important;
  border:1px solid var(--border-2) !important;
  border-radius:999px !important;
  padding:0.42rem 1.1rem !important;
  color:var(--green) !important;
  font-size:0.82rem !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}
.nav-cta:hover {
  background:rgba(74,222,128,0.14) !important;
  border-color:var(--green-muted) !important;
  color:#b9f5d0 !important;
}
.nav-cta::after { display:none !important; }
.mobile-menu-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:1px solid transparent; cursor:pointer;
  padding:0.5rem; border-radius:var(--radius);
  transition:border-color var(--dur-base) var(--ease);
}
.mobile-menu-toggle:hover { border-color:var(--border-2); }
.burger-line {
  display:block; width:22px; height:2px;
  background:var(--text-2); border-radius:2px;
  transition:var(--transition);
}

/* ══════════════════════
   BREADCRUMB
══════════════════════ */
.breadcrumb {
  padding:1rem 0; display:flex; align-items:center;
  gap:0.5rem; font-size:0.65rem; color:var(--text-3);
  flex-wrap:wrap;
}
.breadcrumb a { color:var(--text-3); text-decoration:none; transition:var(--transition); }
.breadcrumb a:hover { color:var(--green); }
.breadcrumb-sep { color:var(--border-2); }
.breadcrumb-current { color:var(--text-2); }

/* ══════════════════════
   APP HERO
══════════════════════ */
.app-hero {
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  margin-bottom:2rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:2rem;
  align-items:center;
  position:relative; overflow:hidden;
}
/* accent top bar */
.app-hero::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--green), transparent);
}

.app-icon {
  width:96px; height:96px; border-radius:var(--radius-lg);
  border:2px solid var(--border-2);
  object-fit:cover; flex-shrink:0;
  image-rendering:pixelated;
}
.app-icon-placeholder {
  width:96px; height:96px; border-radius:var(--radius-lg);
  border:2px solid var(--border-2);
  background:var(--bg-3); display:flex; align-items:center;
  justify-content:center; font-size:2.5rem; flex-shrink:0;
}
.app-developer {
  font-size:0.75rem; color:var(--green-dim);
  margin-bottom:0.6rem;
}
.app-meta-row {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:0.7rem; color:var(--text-3);
}
.app-category {
  background:rgba(74,222,128,0.08); border:1px solid var(--border-2);
  color:var(--text-2); padding:0.2rem 0.65rem;
  border-radius:var(--radius); font-size:0.65rem;
}
.app-version-badge {
  background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.25);
  color:var(--gold); padding:0.2rem 0.65rem;
  border-radius:var(--radius); font-size:0.65rem;
}
.app-rating-row {
  display:flex; align-items:center; gap:0.4rem; margin-top:0.5rem;
}
.stars { color:var(--star); font-size:0.85rem; letter-spacing:2px; }
.rating-num { font-size:0.75rem; color:var(--text-2); }
.rating-count { font-size:0.65rem; color:var(--text-3); }

/* Download button */
.download-btn-wrap { display:flex; flex-direction:column; gap:0.75rem; align-items:flex-end; }
.download-btn {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:1rem 2rem; background:var(--green); color:var(--bg);
  font-family:var(--pixel); font-size:0.55rem; font-weight:700;
  text-decoration:none; border:none; border-radius:var(--radius);
  cursor:pointer; transition:var(--transition); letter-spacing:0.08em;
  white-space:nowrap;
  box-shadow:0 0 24px rgba(74,222,128,0.35);
}
.download-btn:hover {
  background:#6ee7a0; transform:translateY(-2px);
  box-shadow:0 0 40px rgba(74,222,128,0.55);
}
.download-btn svg { flex-shrink:0; }
.download-meta {
  font-size:0.62rem; color:var(--text-3);
  text-align:right; line-height:1.8;
}
.download-meta span { display:block; }

/* ══════════════════════
   SCREENSHOTS
══════════════════════ */
.screenshots-section { margin-bottom:2.5rem; }
.screenshots-label {
  font-family:var(--pixel); font-size:0.5rem; color:var(--text-3);
  letter-spacing:0.2em; text-transform:uppercase;
  padding-bottom:0.75rem; border-bottom:1px solid var(--border);
  margin-bottom:1.25rem; display:block;
}
.screenshots-scroll {
  display:flex; gap:1rem; overflow-x:auto; padding-bottom:0.75rem;
}
.screenshots-scroll::-webkit-scrollbar { height:4px; }
.screenshots-scroll::-webkit-scrollbar-track { background:transparent; }
.screenshots-scroll::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:2px; }

.screenshot {
  flex-shrink:0; width:260px; height:165px;
  object-fit:cover; border-radius:var(--radius-lg);
  border:1px solid var(--border); cursor:pointer;
  transition:var(--transition); filter:brightness(0.85);
}
.screenshot:hover { transform:scale(1.02); filter:brightness(1); border-color:var(--border-2); }
.screenshot-placeholder {
  flex-shrink:0; width:260px; height:165px;
  border-radius:var(--radius-lg); border:1px dashed var(--border-2);
  background:var(--bg-2); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0.5rem;
  color:var(--text-3); font-size:0.65rem;
}
.screenshot-placeholder .ph-icon { font-size:1.5rem; }

/* ══════════════════════
   MAIN LAYOUT
══════════════════════ */
.page-body { flex:1; padding:1.5rem 0 4rem; }
.content-grid {
  display:grid; grid-template-columns:1fr 300px;
  gap:2rem; align-items:start;
}

/* ══════════════════════
   INFO BLOCKS
══════════════════════ */
.info-block { margin-bottom:2rem; }
.block-label {
  font-family:var(--pixel); font-size:0.5rem; color:var(--text-3);
  letter-spacing:0.2em; text-transform:uppercase;
  padding-bottom:0.6rem; border-bottom:1px solid var(--border);
  margin-bottom:1rem; display:block;
}
.block-text {
  font-size:0.82rem; color:var(--text-2); line-height:1.9;
}
.block-text p { margin-bottom:0.75rem; }
.block-text p:last-child { margin-bottom:0; }

/* Features list */
.features-list { list-style:none; }
.features-list li {
  display:flex; align-items:flex-start; gap:0.75rem;
  padding:0.65rem 0; border-bottom:1px solid rgba(28,46,28,0.5);
  font-size:0.8rem; color:var(--text-2);
}
.features-list li:last-child { border-bottom:none; }
.feature-icon { color:var(--green); flex-shrink:0; margin-top:2px; }

/* How to install */
.install-steps { list-style:none; counter-reset:steps; }
.install-steps li {
  counter-increment:steps;
  display:flex; align-items:flex-start; gap:1rem;
  padding:0.85rem 0; border-bottom:1px solid rgba(28,46,28,0.5);
  font-size:0.8rem; color:var(--text-2);
}
.install-steps li:last-child { border-bottom:none; }
.install-steps li::before {
  content:counter(steps);
  font-family:var(--pixel); font-size:0.5rem;
  color:var(--bg); background:var(--green-dim);
  width:22px; height:22px; border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:2px;
}

/* ══════════════════════
   APP INFO TABLE
══════════════════════ */
.info-table {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  margin-bottom:1.5rem;
}
.info-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.85rem 1.25rem; border-bottom:1px solid var(--border);
  font-size:0.78rem; gap:1rem;
}
.info-row:last-child { border-bottom:none; }
.info-key { color:var(--text-3); flex-shrink:0; }
.info-val { color:var(--text); font-weight:700; text-align:right; word-break:break-all; }
.info-val.green { color:var(--green); }
.info-val.gold  { color:var(--gold); }

/* ══════════════════════
   RATINGS
══════════════════════ */
.rating-summary {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  display:flex; gap:2rem; align-items:center; margin-bottom:1.5rem;
}
.rating-big { text-align:center; flex-shrink:0; }
.rating-big-num {
  font-family:var(--pixel); font-size:2.5rem;
  color:var(--green); display:block; line-height:1;
  text-shadow:0 0 12px var(--green);
}
.rating-big-stars { font-size:1rem; color:var(--star); letter-spacing:2px; margin:0.5rem 0; display:block; }
.rating-big-total { font-size:0.65rem; color:var(--text-3); }
.rating-bars { flex:1; display:flex; flex-direction:column; gap:0.4rem; }
.rating-bar-row { display:flex; align-items:center; gap:0.75rem; }
.bar-label { font-size:0.65rem; color:var(--text-3); width:14px; text-align:right; flex-shrink:0; }
.bar-track { flex:1; height:6px; background:var(--bg-3); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; background:var(--green-dim); border-radius:3px; transition:width 1s ease; }
.bar-count { font-size:0.6rem; color:var(--text-3); width:28px; flex-shrink:0; }

/* Review cards */
.review-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem;
  margin-bottom:1rem;
}
.review-header {
  display:flex; justify-content:space-between;
  align-items:flex-start; margin-bottom:0.6rem; gap:1rem;
}
.review-author { font-size:0.75rem; color:var(--text); font-weight:700; }
.review-date { font-size:0.62rem; color:var(--text-3); flex-shrink:0; }
.review-stars { color:var(--star); font-size:0.75rem; margin-bottom:0.5rem; }
.review-text { font-size:0.78rem; color:var(--text-2); line-height:1.7; }

/* Write review form */
.write-review {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem; margin-top:1.5rem;
}
.write-review-title {
  font-family:var(--pixel); font-size:0.5rem; color:var(--text-2);
  letter-spacing:0.12em; margin-bottom:1.25rem; display:block;
}
.star-picker {
  display:flex; gap:0.25rem; margin-bottom:1rem; cursor:pointer;
}
.star-picker span {
  font-size:1.4rem; color:var(--border-2); transition:var(--transition);
  cursor:pointer;
}
.star-picker span.active, .star-picker span:hover { color:var(--star); }
.review-input {
  width:100%; padding:0.75rem;
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius);
  font-family:var(--mono); font-size:0.8rem; resize:vertical;
  transition:var(--transition); margin-bottom:0.75rem;
}
.review-input:focus { outline:none; border-color:var(--green-dim); box-shadow:0 0 0 3px var(--green-glow); }
.review-name-input {
  width:100%; padding:0.65rem 0.75rem;
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius);
  font-family:var(--mono); font-size:0.8rem;
  transition:var(--transition); margin-bottom:0.75rem;
}
.review-name-input:focus { outline:none; border-color:var(--green-dim); box-shadow:0 0 0 3px var(--green-glow); }
.review-name-input::placeholder, .review-input::placeholder { color:var(--text-3); }
.submit-review-btn {
  width:100%; padding:0.8rem;
  background:transparent; border:1px solid var(--green-dim);
  color:var(--green); font-family:var(--pixel); font-size:0.5rem;
  cursor:pointer; border-radius:var(--radius); transition:var(--transition);
}
.submit-review-btn:hover { background:var(--green); color:var(--bg); }
.review-feedback {
  margin-top:0.75rem; font-size:0.72rem; text-align:center;
  padding:0.6rem; border-radius:var(--radius); display:none;
}
.review-feedback.show { display:block; }
.review-feedback.success { background:rgba(74,222,128,0.08); border:1px solid var(--green-dim); color:var(--green); }
.review-feedback.error   { background:rgba(248,113,113,0.08); border:1px solid var(--danger); color:var(--danger); }

/* ══════════════════════
   SIDEBAR
══════════════════════ */
.sidebar-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.5rem;
}
.sidebar-card::before {
  content:''; display:block; height:2px;
  background:linear-gradient(90deg, transparent, var(--green), transparent);
}
.sidebar-card-inner { padding:1.5rem; }
.sidebar-card-title {
  font-family:var(--pixel); font-size:0.48rem; color:var(--text-3);
  letter-spacing:0.18em; text-transform:uppercase; margin-bottom:1rem; display:block;
}

/* Requirements */
.req-list { list-style:none; }
.req-item {
  display:flex; align-items:flex-start; gap:0.6rem;
  padding:0.55rem 0; border-bottom:1px solid var(--border);
  font-size:0.75rem;
}
.req-item:last-child { border-bottom:none; }
.req-icon { color:var(--green-dim); font-size:0.8rem; flex-shrink:0; margin-top:1px; }
.req-text { color:var(--text-2); }
.req-text strong { color:var(--text); display:block; font-size:0.7rem; margin-bottom:1px; }

/* Changelog */
.changelog-list { list-style:none; }
.changelog-item {
  padding:0.6rem 0; border-bottom:1px solid var(--border);
  font-size:0.75rem; color:var(--text-2); line-height:1.6;
}
.changelog-item:last-child { border-bottom:none; }
.changelog-ver {
  font-family:var(--pixel); font-size:0.4rem; color:var(--gold);
  display:block; margin-bottom:0.25rem;
}

/* ══════════════════════
   SAFETY NOTICE
══════════════════════ */
.safety-notice {
  display:flex; gap:0.75rem; align-items:flex-start;
  background:rgba(74,222,128,0.05); border:1px solid rgba(74,222,128,0.15);
  border-radius:var(--radius); padding:1rem 1.25rem;
  font-size:0.72rem; color:var(--text-2); line-height:1.7;
}
.safety-icon { color:var(--green); flex-shrink:0; margin-top:2px; font-size:1rem; }

 /* ══════════════════════
      FOOTER
   ══════════════════════ */
  .site-footer { margin-top:auto; background:var(--bg-2); border-top:1px solid var(--border); }
  .footer-inner-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:3rem; padding:3.5rem 0 3rem; }
  .footer-brand { display:flex; flex-direction:column; gap:1rem; }
  .footer-logo { font-family:var(--pixel); font-size:0.7rem; color:var(--green); letter-spacing:0.1em; text-shadow:0 0 12px rgba(74,222,128,0.4); }
  .footer-brand p { font-size:0.85rem; color:var(--text-3); line-height:1.7; max-width:280px; }
  .footer-col h4 { font-family:var(--pixel); font-size:0.5rem; color:var(--text-2); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1rem; }
  .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.55rem; }
  .footer-col li { margin-bottom:0; }
  .footer-col a { font-size:0.85rem; color:var(--text-3); text-decoration:none; transition:color var(--dur-base) var(--ease); }
  .footer-col a:hover { color:var(--green); }
  .footer-bottom-bar { border-top:1px solid var(--border); padding:1rem 0; background:rgba(6,11,6,0.6); }
  .footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem; }
  .footer-bottom-inner small { font-size:0.78rem; color:var(--text-3); }
/* ══════════════════════
   RESPONSIVE
══════════════════════ */
@media (max-width:960px) {
  .mobile-menu-toggle { display:flex; }
  .main-nav {
    position:fixed; top:68px; left:0; right:0;
    background:rgba(6,11,6,0.98); backdrop-filter:blur(20px);
    padding:1.5rem; visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
    border-bottom:1px solid var(--border); z-index:199;
  }
  .main-nav.open { visibility: visible; opacity: 1; pointer-events: auto; }
  .main-nav ul { flex-direction:column; gap:1.2rem; align-items:stretch; }
  .main-nav a { display:block; text-align:center; padding:0.5rem 0; }
  .nav-cta { text-align:center; }
  .app-hero { grid-template-columns:1fr; text-align:center; }
  .app-icon, .app-icon-placeholder { margin:0 auto; }
  .download-btn-wrap { align-items:center; }
  .download-meta { text-align:center; }
  .content-grid { grid-template-columns:1fr; }
  .rating-summary { flex-direction:column; align-items:flex-start; }
  .footer-inner-grid { grid-template-columns:1fr; gap:2rem; text-align:center; }
  .footer-brand { align-items:center; }
  .footer-brand p { max-width:100%; }
  .footer-col ul { align-items:center; }
  .footer-bottom-inner { flex-direction:column; text-align:center; }
}
@media (max-width:600px) {
  .app-hero { padding:1.5rem; }
  .app-name { font-size:0.75rem; }
  .download-btn { width:100%; justify-content:center; }
}

/* Prevent body scroll when mobile menu is open */
body.menu-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════
   MOBILE OVERFLOW — FINAL GUARD
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  img, video, iframe, canvas {
    max-width: 100% !important;
  }
}