:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
*{box-sizing:border-box}
body{
  margin:0;background:#0b1320;color:#c7d5e0;font-family:Arial;
  padding-left:var(--safe-left);padding-right:var(--safe-right);
  overscroll-behavior:contain;
}
.navbar{
  background:#0f1a2b;
  padding:12px 20px;
  padding-top: calc(12px + var(--safe-top));
  display:flex;gap:18px;align-items:center;border-bottom:1px solid #22324a;
  flex-wrap:wrap;
}
.navbar a{
  color:#7fff7f;text-decoration:none;font-weight:bold;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:8px 10px;border-radius:10px;
}
.navbar a:active{opacity:.85}
.navbar .spacer{margin-left:auto}

.wrap{max-width:1100px;margin:auto;padding:24px;padding-bottom: calc(24px + var(--safe-bottom));}
h1{margin:0 0 14px;color:#7fff7f}

/* Grid: bolj prijazen na telefonu */
.grid{display:grid;grid-template-columns: repeat(4, 1fr); gap:14px}
@media(max-width:1100px){ .grid{grid-template-columns: repeat(3, 1fr);} }
@media(max-width:820px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media(max-width:520px){ .grid{grid-template-columns: repeat(2, 1fr); gap:12px;} }
@media(max-width:380px){ .grid{grid-template-columns: 1fr;} }

.card{
  background:#1b2838;border:1px solid #22324a;border-radius:14px;
  text-decoration:none;color:inherit;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:.15s;
  overflow:hidden;
  position:relative;
  display:block;
}
.card:hover{background:#23344d;transform:scale(1.01)}
.card:active{opacity:.92}
.thumb{
  height:160px;
  background:#0f1a2b;
  border-bottom:1px solid #22324a;
  background-size:cover;
  background-position:center;
}
.content{padding:12px 14px}
.name{font-weight:bold;color:#7fff7f;font-size:16px}
.small{opacity:.85;font-size:12px;margin-top:6px}

/* 🔞 overlay */
.overlay18{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
  pointer-events:none;
}
.badge18{
  position:absolute;top:10px;left:10px;
  background:rgba(15,26,43,0.85);
  border:1px solid #22324a;
  color:#ff7f7f;
  padding:6px 10px;border-radius:999px;
  font-weight:bold;font-size:12px;
}
.lockText{
  position:absolute;bottom:10px;left:10px;right:10px;
  background:rgba(0,0,0,0.96);
  border:1px solid rgba(255,255,255,0.18);
  padding:10px 12px;border-radius:12px;
  font-size:12px;
  color:#ffffff;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.6);
  pointer-events:none;
}
.locked{filter:saturate(0.7);}
.locked .name{color:#c7d5e0}
.locked:hover{transform:none;background:#1b2838}

/* Mobile padding */
@media(max-width:640px){
  .navbar{padding:10px 12px; gap:10px; flex-wrap:wrap;}
  .wrap{padding:14px;}
}