/* ==========================================================================
   Skanimalz — community
   WDYS ("Where Do You Skanimal") photo wall, plus the strip of it on the home page.
   Depends on skz.css for tokens. Loaded by index.html and wdys.html.
   ========================================================================== */

/* ------------------------------------------------------------- shot cards */
/* Each shot is a phone screenshot, so the cards are tall. The wall is a masonry
   column layout rather than a grid: screenshots vary in aspect ratio and a grid
   would either crop them or leave ragged gaps. */
.wall{ columns:2; column-gap:12px; }
@media (min-width:700px){ .wall{ columns:3; column-gap:16px; } }
@media (min-width:1050px){ .wall{ columns:4; } }

.shot{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 12px; background:var(--panel); border:1px solid var(--edge);
  border-radius:var(--r); overflow:hidden; position:relative;
}
@media (min-width:700px){ .shot{ margin-bottom:16px; } }

.shot-img{
  display:block; width:100%; height:auto; background:var(--panel-2);
  cursor:zoom-in;
}
.shot-body{ padding:11px 12px 12px; }
.shot-cap{ font-size:14px; line-height:1.45; }
.shot-meta{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-top:7px; display:flex; flex-wrap:wrap; gap:4px 9px; align-items:center;
}
.shot-got{ color:var(--volt); }
.shot-actions{ display:flex; gap:6px; align-items:center; margin-top:10px; }
.shot-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 11px;
  border-radius:999px; border:1px solid var(--edge-2); color:var(--ink-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  transition:color .18s, border-color .18s, background .18s;
}
.shot-btn:hover{ color:var(--ink); border-color:var(--edge-2); }
.shot-like[aria-pressed="true"]{ color:var(--ember); border-color:rgba(255,90,31,.5); background:rgba(255,90,31,.08); }
.shot-report{ margin-left:auto; padding:0 9px; color:var(--ink-3); }
.shot-report:hover{ color:var(--ember); border-color:rgba(255,90,31,.4); }
.shot-report[aria-pressed="true"]{ color:var(--ember); }

/* ------------------------------------------------------------- home strip */
/* On the home page the wall becomes a swipeable rail so it costs one screen,
   not ten. */
.shot-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:62%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1);
  padding-bottom:8px; overscroll-behavior-x:contain;
}
.shot-rail::-webkit-scrollbar{ display:none; }
.shot-rail > *{ scroll-snap-align:center; }
@media (min-width:620px){ .shot-rail{ grid-auto-columns:34%; } }
@media (min-width:980px){
  .shot-rail{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible;
              padding-inline:0; margin-inline:0; gap:16px; }
}
.shot-rail .shot{ margin:0; }
.shot-rail .shot-img{ aspect-ratio:9/16; object-fit:cover; }

/* --------------------------------------------------------------- uploader */
.upload{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r-lg);
  padding:18px var(--gutter) 20px;
}
@media (min-width:720px){ .upload{ padding:22px 24px 24px; } }
.upload h3{ margin-bottom:4px; }
.upload > p{ color:var(--ink-2); font-size:14px; margin-bottom:16px; }

.drop{
  position:relative; display:grid; place-items:center; gap:8px;
  min-height:150px; padding:20px; text-align:center;
  border:2px dashed var(--edge-2); border-radius:var(--r);
  background:rgba(255,255,255,.02); cursor:pointer;
  transition:border-color .2s, background .2s;
}
.drop:hover, .drop.is-over{ border-color:var(--volt); background:rgba(41,214,255,.06); }
.drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.drop-ic{ font-size:26px; line-height:1; }
.drop-main{ font-family:var(--display); font-weight:700; font-size:15.5px; }
.drop-sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.drop-preview{ max-height:210px; width:auto; border-radius:10px; }

.field{ margin-top:14px; }
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.field input{
  width:100%; min-height:48px; padding:0 15px; border-radius:13px;
  background:#08070F; border:1px solid var(--edge-2); color:var(--ink); font-size:15.5px;
}
.field input:focus{ border-color:var(--volt); outline:none; box-shadow:0 0 0 3px rgba(41,214,255,.16); }
.field-row{ display:grid; gap:14px; }
@media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }
.field-hint{ font-size:12.5px; color:var(--ink-3); margin-top:6px; }
.upload-foot{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px; }
.upload-status{ font-family:var(--mono); font-size:12px; min-height:18px; }
/* Honeypot. Clipped rather than pushed off-canvas — a -9999px offset is a real
   box in the layout and shows up as horizontal overflow. */
.hp{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; opacity:0;
}

.rules{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--edge);
  display:flex; flex-direction:column; gap:8px;
}
.rules li{ list-style:none; display:flex; gap:9px; color:var(--ink-2); font-size:13px; line-height:1.5; }
.rules li::before{ content:"·"; color:var(--volt); font-weight:700; flex:none; }

/* --------------------------------------------------------------- lightbox */
.lightbox{
  position:fixed; inset:0; z-index:90; display:none; place-items:center;
  background:rgba(4,4,10,.93); backdrop-filter:blur(6px); padding:20px;
}
.lightbox.is-open{ display:grid; }
.lightbox img{ max-width:100%; max-height:80vh; width:auto; border-radius:12px; }
.lightbox-cap{
  margin-top:14px; text-align:center; color:var(--ink-2); font-size:14px; max-width:52ch;
}
.lightbox-close{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px;
  width:44px; height:44px; border-radius:12px; border:1px solid var(--edge-2);
  display:grid; place-items:center; color:var(--ink); font-size:20px;
  background:rgba(4,4,12,.7);
}

/* ------------------------------------------------------------ empty state */
.wall-empty{
  border:1px dashed var(--edge-2); border-radius:var(--r-lg);
  padding:32px 22px; text-align:center; color:var(--ink-2);
}
.wall-empty b{ display:block; font-family:var(--display); font-size:1.15rem; color:var(--ink); margin-bottom:6px; }
.wall-empty p{ font-size:14px; max-width:44ch; margin:0 auto; }