/* Estilo oscuro / terrorífico */
:root{
	--bg:#050203;
	--red:#9b0f0f;
	--deep-red:#2b0000;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
::selection{background:rgba(255,10,10,0.14);color:inherit}
::-moz-selection{background:rgba(255,10,10,0.14);color:inherit}
body{
	background: radial-gradient(circle at 10% 10%, rgba(155,15,15,0.02), transparent 10%), linear-gradient(180deg,#070406 0%, #0b0202 60%);
	color:var(--red);
	font-family: 'Courier New', Courier, monospace;
	overflow:auto;min-height:100vh;padding:40px 20px 90px
}
.overlay{
	position:fixed;inset:0;pointer-events:none;
	background: repeating-linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02) 2px, transparent 2px, transparent 6px);
	mix-blend-mode:multiply;
}
.title{
	position:fixed;left:50%;top:6%;transform:translateX(-50%);
	font-size:48px;letter-spacing:4px;color:var(--red);
	text-shadow: 0 0 12px rgba(155,15,15,0.9), 0 0 30px rgba(0,0,0,0.6);
	z-index:1000;opacity:0.95
}
.site-header{position:sticky;top:0;backdrop-filter: blur(2px);z-index:1200;padding:12px 18px;display:flex;align-items:center;justify-content:space-between}
.site-header .title{position:static;transform:none;font-size:28px}
.site-header .sub{display:block;font-size:14px;color:var(--deep-red);opacity:0.9}
.nav{display:flex;gap:8px;align-items:center}
.nav-link{color:var(--red);text-decoration:underline;margin-right:8px}
.nav-btn{background:transparent;border:1px solid rgba(155,15,15,0.25);color:var(--red);padding:6px 8px;border-radius:4px;cursor:pointer}
.upload{display:inline-block;color:var(--red);cursor:pointer;border:1px dashed rgba(155,15,15,0.18);padding:6px 8px;border-radius:4px}
.upload input{display:none}

.intro{padding:18px 22px 6px 22px;color:rgba(200,80,80,0.9);font-style:italic}

/* Gallery as columns to avoid overlap */
.gallery{column-width:320px;column-gap:18px;padding:12px 22px 120px;max-width:1400px;margin:0 auto}
.gallery .item{display:inline-block;width:100%;margin:0 0 18px;break-inside:avoid;position:relative;overflow:hidden;border-radius:6px}
.gallery img, .gallery video{width:100%;height:auto;display:block;border-radius:4px}
.item .meta{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,0.45);padding:6px 8px;border-radius:4px;color:#fff;font-size:12px}

.gallery .item:hover{filter:drop-shadow(0 8px 20px rgba(0,0,0,0.9))}

/* larger screens: more columns */
@media (min-width:1200px){.gallery{column-width:360px}}

.float-media{
	position:fixed;pointer-events:auto;object-fit:cover;
	border:2px solid rgba(155,15,15,0.6);box-shadow:0 8px 30px rgba(0,0,0,0.9);
	filter:grayscale(20%) contrast(110%) saturate(80%);
	mix-blend-mode:screen;opacity:0.95;transition:transform 0.6s ease, opacity 0.4s ease;
}
.float-media:hover{transform:scale(1.08) rotate(var(--rot));opacity:1}

@keyframes drift{
	0%{transform: translateY(0) rotate(var(--rot))}
	50%{transform: translateY(-12px) rotate(calc(var(--rot) + 3deg))}
	100%{transform: translateY(0) rotate(var(--rot))}
}

/* small flicker */
body::after{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px),
		linear-gradient(180deg, rgba(255,255,255,0.08), transparent 30%, rgba(255,255,255,0.02) 60%, transparent 100%),
		radial-gradient(circle at 50% 10%, rgba(155,15,15,0.02), transparent 30%);
	mix-blend-mode:overlay;
	animation: staticPulse 0.35s steps(2) infinite;
	opacity:0.08;
}

@keyframes staticPulse{
	0%{opacity:0.06;background-position: 0 0, 0 0, 0 0;}
	50%{opacity:0.12;background-position: 4px 6px, 8px 0, 0 8px;}
	100%{opacity:0.08;background-position: 2px 4px, 4px 2px, 0 4px;}
}

/* make videos slightly ghostly */
video.float-media{filter:contrast(120%) grayscale(10%) sepia(10%)}

/* responsive fallback */
@media (max-width:600px){.title{font-size:22px}}

/* Retro / disturbing homepage styles */
.retro{background:#000;color:#8f1b1b;font-family: 'Courier New',Courier,monospace}
.frame{width:min(82vw,980px);max-width:980px;margin:18vh auto 2vh auto;padding:32px 28px;border:2px solid rgba(200,20,20,0.12);background:linear-gradient(180deg, rgba(10,10,10,0.8), rgba(0,0,0,0.98));box-shadow:0 0 160px rgba(155,15,15,0.08) inset;position:relative;min-height:52vh;z-index:30}
.frame.large{padding:42px}
.terminal{color:#9d2b2b;background:transparent;padding:18px 22px;margin:0;line-height:24px;font-size:20px;letter-spacing:0.6px}
.plain-link{color:#ff6b6b;text-decoration:underline;cursor:pointer}
.action-block{margin-top:26px;text-align:center}
.button-link{display:inline-block;margin-top:14px;padding:16px 28px;border:1px solid rgba(255,107,107,0.6);color:#ffb3b3;text-decoration:none;font-family:'Courier New',Courier,monospace;letter-spacing:0.2em;background:rgba(0,0,0,0.4);}
.button-link:hover{background:rgba(155,15,15,0.18)}
.glow{position:absolute;right:60px;top:90px;color:#5a0000;font-weight:700;opacity:0.16;font-size:140px;transform:rotate(-8deg);pointer-events:none}
.scanlines{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,0,0,0.03) 50%, transparent 50%);background-size:100% 4px;mix-blend-mode:overlay}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.4) 72%, rgba(0,0,0,0.82) 100%);
  z-index: 1;
}

/* flicker animation */
@keyframes flicker{0%{opacity:1}4%{opacity:0.2}6%{opacity:1}10%{opacity:0.3}20%{opacity:1}100%{opacity:1}}
.frame{animation: flicker 6s linear infinite}

@keyframes pulseRed{
  0%, 100% { box-shadow: 0 0 0 rgba(255,70,70,0.2), 0 0 18px rgba(255,70,70,0.15); }
  50% { box-shadow: 0 0 18px rgba(255,70,70,0.35), 0 0 36px rgba(255,70,70,0.2); }
}

.frame::after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255,120,120,0.08);
  pointer-events:none;
  animation: pulseRed 4s ease-in-out infinite;
}

.frame a.plain-link{color:#ffb3b3}

/* small red noise overlays */
.frame::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;background:repeating-linear-gradient(45deg, rgba(155,15,15,0.02), rgba(155,15,15,0.02) 1px, transparent 1px, transparent 6px)}

.scroll-controls{position:fixed;right:24px;top:28px;display:flex;flex-direction:column;gap:10px;z-index:1300}
.scroll-btn{background:rgba(15,0,0,0.7);border:1px solid rgba(155,15,15,0.55);color:#f5b3b3;padding:10px 14px;font-family:'Courier New',Courier,monospace;letter-spacing:0.1em;cursor:pointer;backdrop-filter:blur(2px)}
.scroll-btn:hover{background:rgba(155,15,15,0.18)}
.scroll-space{min-height:90vh;display:flex;align-items:flex-end;justify-content:center;padding:10vh 0 18vh 0}
.scroll-content{max-width:760px;padding:34px 26px;border:1px dashed rgba(155,15,15,0.3);background:rgba(0,0,0,0.5);color:rgba(255,255,255,0.88);font-size:18px;line-height:1.8;letter-spacing:0.08em;}
.ghost-line{margin:14px 0;text-transform:uppercase;}

/* Scattered media on homepage */
.scattered{position:fixed;inset:0;pointer-events:none;z-index:5}
.scattered .media{position:absolute;pointer-events:auto;border:1px solid rgba(155,15,15,0.45);box-shadow:0 4px 20px rgba(0,0,0,0.8);background:#000;animation: floaty 12s ease-in-out infinite;opacity:0.78;filter:grayscale(18%) contrast(105%) sepia(10%);backdrop-filter: blur(0.2px);}
.scattered .media:nth-child(odd){animation-duration:14s}
.scattered .media:nth-child(even){animation-duration:11s}
.scattered .media img, .scattered .media video{display:block;width:100%;height:100%;object-fit:cover;vertical-align:middle}
.scattered .media video{background:#000}

#random-link-host{position:fixed;inset:0;pointer-events:none;z-index:40}
.secret-link{
  position:absolute;
  pointer-events:auto;
  color: rgba(255, 170, 170, 0.9);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,120,120,0.4);
  background: rgba(12,2,2,0.52);
  box-shadow: 0 0 18px rgba(255,90,90,0.18);
  animation: driftLink 7s ease-in-out infinite alternate;
}

.secret-link:hover{
  background: rgba(120,0,0,0.24);
  box-shadow: 0 0 24px rgba(255,90,90,0.28);
}

@keyframes floaty{0%{transform:translateY(0px)}50%{transform:translateY(14px)}100%{transform:translateY(0px)}}
@keyframes driftLink{
  0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) rotate(3deg) scale(1.08); opacity: 1; }
}

/* Mobile-only adjustments (no effect on desktop) */
@media (max-width: 700px) {
	body{padding:18px 12px 48px; font-size:16px; line-height:1.35; overflow-x:hidden; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
	.frame{margin:8vh auto 2vh auto;padding:20px;min-height:46vh}
	.frame.large{padding:20px}
	.terminal{font-size:16px;line-height:20px}
	.glow{display:none}
	.scanlines{background-size:100% 6px}
	.scroll-controls{right:12px;top:10px}
	.scroll-space{min-height:60vh;padding:8vh 0 12vh 0}
	/* adjust central panel for better mobile readability */
	.scroll-content{max-width:92vw;padding:18px 14px;border:1px solid rgba(155,15,15,0.18);background:rgba(0,0,0,0.52);font-size:15px;line-height:1.5;border-radius:6px;margin:0 8px}
	/* hide heavy scattered media on small screens */
	.scattered{display:block}
	.scattered .media{display:none}
	/* make action button friendlier on touch */
	.button-link{padding:12px 18px;font-size:14px}
	/* secret link slightly smaller on mobile */
	.secret-link{font-size:9px;padding:6px 8px}
	/* prevent pinch-zoom / gesture zoom on supported mobile browsers */
	html, body { touch-action: manipulation; -ms-touch-action: manipulation; }
}