/* ============================================================
   MCVN Skins — Global stylesheet
   Hướng thẩm mỹ: "Voxel Editorial" — nền tối đá phiến, lưới pixel
   tinh tế, điểm nhấn xanh lá khối cỏ + hổ phách, font display dạng
   block 8-bit kết hợp font thân chữ tinh gọn để dễ đọc.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Space+Mono:wght@400;700&family=Sora:wght@400;500;600;700;800&display=swap');

:root{
  --bg-deep:        #0e1410;
  --bg-panel:       #161d18;
  --bg-panel-raised:#1d2620;
  --bg-inset:       #0a0f0c;

  --grass-500:      #6cbf3f;
  --grass-400:      #8fd95f;
  --grass-700:      #3f7d24;
  --dirt-600:       #6b4a2f;
  --amber-400:      #f2b13d;
  --amber-500:      #db9420;
  --lapis-400:      #4d8fd9;

  --ink-100:        #f3f6f1;
  --ink-300:        #c4cfc2;
  --ink-500:        #8a978a;
  --ink-700:        #4d564c;

  --danger:         #d9543f;

  --font-display:   'Noto Sans', monospace;
  --font-mono:       'Space Mono', monospace;
  --font-body:       'Sora', sans-serif;

  --radius-block:   3px;
  --shadow-block:   4px 4px 0 rgba(0,0,0,0.45);
  --shadow-block-sm: 2px 2px 0 rgba(0,0,0,0.45);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg-deep);
  color:var(--ink-100);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
  position:relative;
}

/* Lưới pixel mờ phủ nền toàn site, tạo chiều sâu kiểu "đào hầm" */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at 50% 0%, black 0%, transparent 75%);
}

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

h1,h2,h3{
  font-family:var(--font-display);
  line-height:1.5;
  letter-spacing:0.5px;
  margin:0;
}
h1{ font-size:1.6rem; }
h2{ font-size:1.1rem; }
h3{ font-size:0.85rem; }

p{ margin:0 0 1em; color:var(--ink-300); }

::selection{ background:var(--grass-500); color:#08110a; }

/* ---------------- Layout shell ---------------- */
.shell{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(14,20,16,0.86);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--bg-inset);
}
.site-header .shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  padding-bottom:16px;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-size:0.8rem;
  color:var(--grass-400);
  white-space:nowrap;
}
.brand .block-icon{
  width:28px; height:28px;
  background:
    linear-gradient(160deg, var(--grass-400) 0 40%, var(--grass-700) 40% 100%),
    var(--dirt-600);
  background-blend-mode:normal;
  border-radius:var(--radius-block);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,0.25), var(--shadow-block-sm);
  flex-shrink:0;
}

nav.main-nav{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
nav.main-nav a{
  font-size:0.82rem;
  font-weight:600;
  color:var(--ink-300);
  padding:8px 12px;
  border-radius:var(--radius-block);
  transition:background .15s ease, color .15s ease;
}
nav.main-nav a:hover{ background:var(--bg-panel-raised); color:var(--ink-100); }
nav.main-nav a.active{ color:var(--grass-400); }

.auth-area{ display:flex; align-items:center; gap:10px; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.9rem;
  padding:11px 18px;
  border-radius:var(--radius-block);
  border:2px solid var(--bg-inset);
  cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
  box-shadow:var(--shadow-block-sm);
}
.btn:active{ transform:translate(2px,2px); box-shadow:none; }
.btn-primary{ background:var(--grass-500); color:#08110a; }
.btn-primary:hover{ background:var(--grass-400); }
.btn-ghost{ background:var(--bg-panel-raised); color:var(--ink-100); }
.btn-ghost:hover{ background:var(--bg-panel); }
.btn-amber{ background:var(--amber-400); color:#2a1c02; }
.btn-amber:hover{ background:var(--amber-500); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-sm{ padding:7px 12px; font-size:0.78rem; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ---------------- Cards / panels ---------------- */
.panel{
  background:var(--bg-panel);
  border:2px solid var(--bg-inset);
  border-radius:var(--radius-block);
  box-shadow:var(--shadow-block);
  padding:24px;
}

.skin-card{
  background:var(--bg-panel);
  border:2px solid var(--bg-inset);
  border-radius:var(--radius-block);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.skin-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-block);
  border-color:var(--grass-700);
}
.skin-card .preview-wrap{
  aspect-ratio:1/1;
  background:
    repeating-conic-gradient(var(--bg-inset) 0% 25%, var(--bg-panel-raised) 0% 50%) 0 0/16px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.skin-card .preview-wrap canvas{ width:100%; height:100%; display:block; }
.skin-card .meta{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; }
.skin-card .title{ font-weight:700; font-size:0.95rem; color:var(--ink-100); }
.skin-card .owner{ font-size:0.78rem; color:var(--ink-500); }
.skin-card .stats{
  display:flex; gap:14px; font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-500);
  margin-top:4px;
}

.skin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:18px;
  margin-top:24px;
}

/* ---------------- Forms ---------------- */
label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; color:var(--ink-300); }
input[type=text], input[type=email], input[type=password], textarea, select{
  width:100%;
  background:var(--bg-inset);
  border:2px solid var(--bg-inset);
  color:var(--ink-100);
  padding:11px 12px;
  border-radius:var(--radius-block);
  font-family:var(--font-body);
  font-size:0.92rem;
  transition:border-color .12s ease;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--grass-500); }
textarea{ resize:vertical; min-height:80px; }
.field{ margin-bottom:18px; }
.field-hint{ font-size:0.78rem; color:var(--ink-500); margin-top:6px; }
.field-error{ font-size:0.78rem; color:var(--danger); margin-top:6px; }

/* file dropzone */
.dropzone{
  border:2px dashed var(--ink-700);
  border-radius:var(--radius-block);
  padding:32px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.dropzone.dragover{ border-color:var(--grass-500); background:rgba(108,191,63,0.06); }
.dropzone p{ margin:0; }

/* ---------------- Hero ---------------- */
.hero{
  padding:64px 0 48px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.hero h1{ font-size:1.9rem; line-height:1.6; margin-bottom:18px; }
.hero h1 .accent{ color:var(--grass-400); }
.hero .lede{ font-size:1.02rem; max-width:46ch; }
.hero-actions{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.hero-stage{
  aspect-ratio:1/1;
  background:var(--bg-panel);
  border:2px solid var(--bg-inset);
  border-radius:var(--radius-block);
  box-shadow:var(--shadow-block);
  position:relative;
  overflow:hidden;
}
.hero-stage canvas{ width:100%; height:100%; display:block; }

/* ---------------- Section headers ---------------- */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:48px;
}
.section-head h2{ display:flex; align-items:center; gap:10px; }
.section-head .tag-dot{ width:10px; height:10px; background:var(--grass-500); border-radius:2px; }

.search-bar{ display:flex; gap:10px; max-width:420px; width:100%; }
.search-bar input{ flex:1; }

/* tags chips */
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.tag-chip{
  font-family:var(--font-mono);
  font-size:0.78rem;
  padding:6px 12px;
  background:var(--bg-panel-raised);
  border:1px solid var(--ink-700);
  border-radius:20px;
  color:var(--ink-300);
  cursor:pointer;
  transition:all .12s ease;
}
.tag-chip:hover, .tag-chip.active{ border-color:var(--grass-500); color:var(--grass-400); }

/* ---------------- Footer ---------------- */
.site-footer{
  margin-top:80px;
  border-top:2px solid var(--bg-inset);
  padding:32px 0 48px;
  color:var(--ink-500);
  font-size:0.82rem;
}
.site-footer .shell{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* ---------------- Toast / alert ---------------- */
.toast{
  position:fixed;
  bottom:24px; right:24px;
  z-index:200;
  background:var(--bg-panel-raised);
  border:2px solid var(--bg-inset);
  border-radius:var(--radius-block);
  box-shadow:var(--shadow-block);
  padding:14px 18px;
  font-size:0.85rem;
  max-width:320px;
  animation:toast-in .18s ease;
}
.toast.error{ border-color:var(--danger); }
.toast.success{ border-color:var(--grass-500); }
@keyframes toast-in{ from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* ---------------- Modal ---------------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; z-index:150;
  padding:20px;
}
.modal{
  background:var(--bg-panel);
  border:2px solid var(--bg-inset);
  border-radius:var(--radius-block);
  box-shadow:var(--shadow-block);
  padding:28px;
  width:100%; max-width:420px;
  animation:toast-in .15s ease;
}
.modal-close{
  position:absolute; top:18px; right:18px; cursor:pointer; color:var(--ink-500);
  font-family:var(--font-mono); font-size:1.1rem;
}

/* ---------------- Utility ---------------- */
.muted{ color:var(--ink-500); }
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.loading-strip{
  height:3px; width:100%; background:var(--bg-inset);
  position:relative; overflow:hidden; border-radius:2px;
}
.loading-strip::after{
  content:""; position:absolute; inset:0; width:40%;
  background:var(--grass-500); animation:loading-sweep 1.1s ease-in-out infinite;
}
@keyframes loading-sweep{
  0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); }
}

@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; }
  nav.main-nav{ display:none; }
  .site-header .shell{ flex-wrap:wrap; }
}