/* ===========================================================
   Download View — HL2DM Ranked
   =========================================================== */

:root{
  --ink: #e8eef7;
  --muted: #9fb1c9;
  --line: #203048;

  --panel: linear-gradient(180deg, rgba(8,16,28,.92), rgba(8,16,28,.86));
  --panel-border: 1px solid rgba(26,42,64,.60);

  --cyan: var(--cine-primary, #00e5ff);
  --mag:  var(--cine-accent,  #ff00ea);

  --chip: #0e1725;
  --chip-2: #13263b;

  --focus: #8fd7ff;
}

/* Page container */
.download-view{
  color: var(--ink);
}

/* Section boxes */
.download-view .dv-box{
  margin: 18px 0;
  padding: 16px 16px 18px;
  border-radius: 16px;
  border: var(--panel-border);
  background: var(--panel);
  box-shadow:
    0 0 0 1px rgba(26,42,64,.35) inset,
    0 18px 40px rgba(0,0,0,.55);
  position: relative;
  z-index: 1; /* never overlay the navbar */
}

/* ===== Actions row (Edit / Delete etc.) ===== */
.download-view .dv-actions{
  display: flex;
  align-items: center;
  gap: 12px;                 /* space between buttons */
  flex-wrap: wrap;           /* wrap on phones if needed */
  margin: 12px 0 8px;
}
.download-view .dv-actions form{ margin: 0; }      /* kill default form margins */
.download-view .dv-actions .btn{
  height: 42px;
  padding: 0 16px;
  white-space: nowrap;       /* keep labels on one line */
}

@media (max-width: 560px){
  .download-view .dv-actions{ gap: 10px; }
}

/* Section headings */
/* ===== Download title + meta lines ===== */

/* Big title */
.download-view > h2{
  margin: 0 0 6px;
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #e6eefc;
  text-shadow: 0 0 1px rgba(0,0,0,.6);
}

/* First line after the title: “Author: …” */
.download-view > h2 + p{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: 2px 0 4px;
  color: #cbd8ea;
}
.download-view > h2 + p em{
  font-style: normal;
  font-weight: 700;
  color: #8fd7ff;
}

/* Second line: “Uploaded by: …” */
.download-view > h2 + p + p{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: 2px 0 8px;
  color: #cbd8ea;
}
.download-view > h2 + p + p em{
  font-style: normal;
  font-weight: 700;
  color: #8fd7ff;
}
.download-view > h2 + p + p a{
  color: #7bd0ff;
  text-decoration: none;
}
.download-view > h2 + p + p a:hover{
  text-decoration: underline;
}

/* Third line: created / updated times – make them “chips” */
.download-view > h2 + p + p + p{
  margin: 8px 0 2px;
  color: #a9b9d1;
}
.download-view > h2 + p + p + p small{
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13, 24, 38, .75);
  border: 1px solid rgba(120, 150, 185, .28);
  color: #cfe4ff;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.25) inset;
}

/* If you want to soften the literal middle dot between them */
.download-view > h2 + p + p + p{
  letter-spacing: .01em;
}
.download-view > h2 + p + p + p:has(small) {
  /* lighten the separator if there’s one in the HTML (“ · ”) */
}
.download-view h3{
  margin: 0 0 10px;
  font-family:"Orbitron", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.download-view h3::after{
  content:"";
  display:block;
  height: 2px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(0,229,255,.45),
    rgba(157, 0, 255, .34),
    rgba(0,229,255,.45)
  );
  box-shadow:
    0 0 10px rgba(0,229,255,.18),
    0 0 12px rgba(157,0,255,.14);
  opacity:.9;
}

/* Links */
.download-view a{ color: hsl(200 95% 70%); }
.download-view a:hover{ text-decoration: underline; }

/* Fixed 16:9 cover frame to prevent layout shift */
.dv-cover-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* universal size (1920x1080 ratio) */
  border-radius: 12px;
  border: 1px solid rgba(150,180,210,.22);
  background:#000;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}

/* Make the image fill the frame */
.dv-cover-frame > .dv-cover-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* crop to fill; use `contain` for letterboxing instead */
  display: block;
}

/* ===========================================
   Cover + gallery
   =========================================== */

.dv-cover{
  margin: 0;
}
.dv-cover-img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 12px;
  border: 1px solid rgba(150,180,210,.22);
  background:#000;
  object-fit: cover;
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}
.dv-cover figcaption{
  margin-top:8px; color: var(--muted); font-size: .9rem;
}

.dv-gallery{
  list-style:none; margin: 10px 0 0; padding: 0;
  display:flex; gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.dv-gallery li{ flex: 0 0 auto; }
.dv-thumb{
  display:block;
  width: 160px; height: 90px;
  object-fit: cover;
  border-radius: 10px;
  border:1px solid rgba(150,180,210,.22);
  background:#000;
  opacity:.85;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.dv-thumb:hover{ transform: translateY(-2px); opacity:1; }
.dv-thumb.active{
  opacity:1;
  box-shadow: 0 0 0 2px #249dde inset, 0 8px 18px rgba(0,0,0,.4);
}

/* ===========================================
   Buttons (contrast + shapes)
   =========================================== */

.download-view .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 40px; padding: 0 14px;
  border-radius: 12px; border: 1px solid rgba(120,150,185,.28);
  background: #0e1725; color: #cfe4ff;
  font-weight: 800; letter-spacing:.02em;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.download-view .btn:hover{ transform: translateY(-1px); }
.download-view .btn-small{ height: 34px; padding: 0 10px; border-radius: 10px; }

.download-view .btn-primary{
  background: linear-gradient(180deg, #8fd7ff, #63c1f0);
  color: #00141f;              /* high contrast text */
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 8px 26px rgba(99,193,240,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.download-view .btn-primary:hover{
  filter: brightness(.98);
  box-shadow: 0 10px 30px rgba(99,193,240,.42), 0 0 0 1px rgba(255,255,255,.12) inset;
}

.download-view .btn-outline{
  background: #0f1b2b;
  color:#d8e7ff;
}
.download-view .btn-danger{
  background: #2b1218;
  color: #ffdbe1;
  border-color: rgba(255,100,120,.35);
}

/* Pills (counts etc.) */
.download-view .pill{
  display:inline-grid; place-items:center;
  min-width: 28px; height: 28px; padding: 0 10px;
  border-radius: 999px;
  background:#0c1a2a;
  border:1px solid rgba(120,150,185,.28);
  color:#d6e6ff;
  font-weight:800;
}

/* ===========================================
   Rate this (emoji buttons)
   =========================================== */

#voteBox{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
#voteBox .sep{ opacity:.6; }

.vote-btn{
  min-width:44px; height:42px;
  border-radius: 12px;
  background: var(--chip);
  border: 1px solid rgba(120,150,185,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  font-size: 20px;
  line-height: 1;
  color: #dff4ff;              /* brighter emoji/text */
}
.vote-btn:hover{ background: #101e32; }
.vote-btn[aria-pressed="true"]{
  background: var(--chip-2);
  border-color: #249dde;
  box-shadow:
    0 0 0 2px rgba(36,157,222,.25) inset,
    0 8px 18px rgba(0,0,0,.4);
}

#vote-up, #vote-down{ composes: pill; }
#vote-up, #vote-down{
  display:inline-grid; place-items:center;
  min-width: 30px; height: 30px; padding: 0 10px;
  border-radius: 999px;
  background:#0c1a2a;
  border:1px solid rgba(120,150,185,.30);
  color:#e7f2ff;
  font-weight:800;
}

.vote-clear{
  height: 36px; padding: 0 12px; border-radius: 10px;
  background:#1a2940; color:#d9ebff;
  border:1px solid rgba(255,255,255,.10);
}
.vote-clear:hover{ background:#1e2f4a; }

/* ===========================================
   Editor (toolbar + wide textarea)
   =========================================== */

.dv-box .md-toolbar{
  display:flex; flex-wrap:wrap; gap:6px;
  margin: 2px 0 8px;
}
.dv-box .md-toolbar button{
  height:32px; min-width: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background:#0e1828;
  color:#cfe4ff;
  border:1px solid rgba(120,150,185,.28);
}
.dv-box textarea{
  display:block;
  width: 100%;
  min-height: 190px;
  padding: 10px 12px;
  border-radius: 12px;
  background:#0b1422;
  color: var(--ink);
  border:1px solid rgba(120,150,185,.35);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}

/* ===========================================
   Markdown (description)
   =========================================== */

.dv-md, .download-view .dv-box > div{ /* fallback scope if dv-md class not added */
  line-height: 1.7;
  color: var(--ink);
}
.dv-md p{ margin: .6rem 0; overflow-wrap: anywhere; }
.dv-md img{ max-width: 100%; height:auto; border-radius: 12px; border:1px solid rgba(150,180,210,.22); }
.dv-md blockquote{
  margin: .6rem 0; padding: .6rem .8rem;
  border-left: 3px solid #3aa4ff55;
  background: #0a1424;
  border-radius: 8px;
}
.dv-md code{
  background: rgba(255,255,255,.06);
  padding: .1em .4em;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
}
.dv-md pre{
  margin: .7rem 0; padding: 12px 14px;
  background: #0b1422;
  border: 1px solid rgba(120,150,185,.30);
  border-radius: 12px;
  overflow: auto;              /* never spill */
  max-width: 100%;
}
.dv-md pre code{
  background: transparent;     /* no double bg */
  border: 0;
  white-space: pre;            /* keep code spacing */
}

/* ===========================================
   Alerts (flash)
   =========================================== */

.download-view .alert{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.10);
  background:#0f1b2c;
}
.download-view .alert.success{ border-color:#2a7f51; background:#0e1f18; }
.download-view .alert.danger{  border-color:#8b2a3b; background:#1e0e14; }

/* ===========================================
   Navbar safety on this page (hamburger visibility)
   =========================================== */

.neon-navbar{ z-index: 2000; } /* above everything here */
@media (max-width: 900px){
  .neon-navbar .menu-toggle{ display:flex !important; }
  .neon-navbar .menu-toggle span{ background: var(--cyan) !important; }
}

/* ===========================================
   Responsive
   =========================================== */

@media (max-width: 720px){
  .download-view h2{ font-size: clamp(20px, 5.6vw, 28px); }
  .download-view .dv-box{ padding: 12px 12px 14px; border-radius: 14px; }
  .download-view .btn-primary{ width: 100%; justify-content:center; }
  .dv-thumb{ width: 140px; height: 78px; }
  #voteBox{ gap: 10px; }
}

@media (max-width: 420px){
  .dv-thumb{ width: 120px; height: 66px; }
  .vote-btn{ min-width: 42px; height: 40px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .dv-thumb{ transition: none; }
  .download-view .btn{ transition: none; }
}