@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face {
  font-family: 'Iosevka Slab';
  src: url('IosevkaSlab.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

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

html {
  font-size: 16px;
}

p {
  font-family: "Iosevka Term Slab", monospace;
}

#tiny {
  font-size: 12px; 
}

#uno, #summon-cat {
  padding-bottom: 0.8rem;
}

* {
  margin: 0;
  color: #1d1d20;      
  font-family: "Iosevka Term Slab", monospace;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='3.25' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 8 8, auto;
}

body {
  background: #f2ecce; /* paper beige */
}

/* =========================
   LAYOUT
   ========================= */

.page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 65% 35%;
  padding: 4rem;
}

@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    padding: 2rem;
  }
}

.statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.statement .small {
  font-family: "Iosevka Term Slab", monospace;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin: 0;
}

.statement .me {
  font-family: "Iosevka Term Slab", monospace;
  font-size: clamp(6rem, 14vw, 9rem);
  line-height: 0.9;
  margin: 0.5rem 0 0;
  font-style: italic;
}

.links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.links nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: "Iosevka Term Slab", monospace;
  font-size: 0.85rem;
}

.links a {
  color: rgba(29, 29, 32, 0.45); /* faded ink */
  text-decoration: none;
}

.links a:hover {
  color: #1d1d20;
  text-decoration: underline;
}

.rule {
  height: 1px;
  background: #26262a;
  margin: 3rem 0;
}

* {
  font-family: "Iosevka Term Slab", monospace;
}

.links a {
  position: relative;
  color: rgba(29, 29, 32, 0.45);
  text-decoration: none;
}

.blurb {
  position: absolute;
  right: 100%;
  margin-right: 2px;
  white-space: nowrap;
  font-size: 0.5rem;
  color: rgba(29, 29, 32, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.links a:hover .blurb {
  opacity: 1;
}

#cat-box {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 100px;
  height: 100px;
  border: 1px solid #888;
  background: #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wildcard-text {
	font-size: clamp(4rem, 12vw, 10rem);
	font-weight: 900;
	font-family: 'Press Start 2P', monospace;
	font-optical-sizing: auto;
	letter-spacing: 0.08em;

	background: linear-gradient(
		90deg,
		#ff0000,
		#ff8800,
		#ffee00,
		#00ff66,
		#00d9ff,
		#0044ff,
		#aa00ff,
		#ff0088,
		#ff0000
	);

	background-size: 300% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
	animation:
		rainbowMove 3s linear infinite,
		warpText 1.8s ease-in-out infinite;
}

/* Rainbow flowing through letters */
@keyframes rainbowMove {
	from {
		background-position: 0% 50%;
	}
	to {
		background-position: 300% 50%;
	}
}

/* Demo-scene warp vibe */
@keyframes warpText {
	0% {
		transform: perspective(500px) rotateX(0deg) rotateY(0deg) skewX(0deg) scale(1);
	}

	25% {
		transform: perspective(500px) rotateX(8deg) rotateY(-10deg) skewX(6deg) scale(1.05, 0.95);
	}

	50% {
		transform: perspective(500px) rotateX(-6deg) rotateY(12deg) skewX(-8deg) scale(0.96, 1.06);
	}

	75% {
		transform: perspective(500px) rotateX(5deg) rotateY(-8deg) skewX(5deg) scale(1.04, 0.96);
	}

	100% {
		transform: perspective(500px) rotateX(0deg) rotateY(0deg) skewX(0deg) scale(1);
	}
}

.wild-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 0.85;
	margin-bottom: 1rem;
}