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

/* ── Custom Cursor ── */
* {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpolygon points='2,2 2,18 6,14 9,20 11,19 8,13 13,13' fill='%23d17842' stroke='%232d1e16' stroke-width='1.5'/%3E%3C/svg%3E") 2 2, auto;
  box-sizing: border-box;
}

a, button, .btn {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpolygon points='2,2 2,18 6,14 9,20 11,19 8,13 13,13' fill='%234a7856' stroke='%232d1e16' stroke-width='1.5'/%3E%3C/svg%3E") 2 2, pointer;
}

/* ── Base ── */
body {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #2d1e16;
  padding: 20px;
  animation: pageFadeIn 0.6s ease forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Nav Tabs ── */
.nav-tabs {
  max-width: 900px;
  margin: 0 auto 14px;
  display: flex;
  gap: 6px;
}

.tab-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 8px 14px;
  background: #ffdfb2;
  border: 3px solid #4a3b2e;
  box-shadow: 3px 3px 0 #2d1e16;
  color: #2d1e16;
  transition: all 0.15s ease;
}

.tab-btn.active,
.tab-btn:hover {
  background: #d17842;
  color: #fffaf3;
  transform: translateY(-2px);
}

/* ── Page Sections ── */
.page {
  display: none;
  max-width: 900px;
  margin: 0 auto;
}

.page.active {
  display: block;
  animation: cardIn 0.35s ease forwards;
}

/* ── Cards ── */
.card {
  background: #fffaf3;
  border: 3px solid #4a3b2e;
  padding: 12px;
  box-shadow: 4px 4px 0 #2d1e16;
  font-size: 10px;
  line-height: 1.8;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #2d1e16;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 10px;
  color: #6c5f53;
  text-decoration: underline;
}

/* ── Animations ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 6px #d17842, 0 0 12px #d17842 inset, 4px 4px 0 #2d1e16; }
  50%       { box-shadow: 0 0 14px #f2b880, 0 0 28px #f2b880 inset, 4px 4px 0 #2d1e16; }
}

@keyframes blinkCursor {
  50% { opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes sparkleFade {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-20px) scale(0.4); }
}

/* ── Utility Classes ── */
.blink::after {
  content: "_";
  animation: blinkCursor 1s step-end infinite;
  color: #d17842;
}

.float {
  animation: float 3s ease-in-out infinite;
}

/* ── Character Sprite ── */
.character {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  margin-bottom: -40px;
  position: relative;
  z-index: 2;
}

.character img {
  width: 160px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px #d4a373);
}

/* ── Lists ── */
ul {
  list-style: square;
  margin: 0;
  padding-left: 20px;
}

/* ── Title Bar ── */
.title-bar {
  background: #d4b07d;
  border: 3px solid #d17842;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  margin-bottom: 12px;
  animation: pulseGlow 2s ease-in-out infinite;
}

/* ── TV ── */
.tv-outer {
  margin-bottom: 12px;
}

.tv-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0 6px;
}

.tv-body {
  position: relative;
  background: #4a3b2e;
  border: 4px solid #2d1e16;
  box-shadow: 4px 4px 0 #2d1e16;
  padding: 14px 16px 10px;
  width: 340px;
}

.tv-antenna {
  position: absolute;
  top: -30px;
  width: 4px;
  height: 30px;
  background: #2d1e16;
}

.tv-antenna-left  { left: 65px;  transform: rotate(-18deg); transform-origin: bottom center; }
.tv-antenna-right { right: 65px; transform: rotate(18deg);  transform-origin: bottom center; }

.tv-screen {
  background: #000;
  border: 4px solid #2d1e16;
  box-shadow: inset 0 0 10px rgba(209, 120, 66, 0.4);
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.tv-screen iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.tv-base {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 7px 4px 0;
}

.tv-knob {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d4b07d;
  border: 2px solid #2d1e16;
}

.tv-legs {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 2px;
}

.tv-leg {
  width: 8px;
  height: 12px;
  background: #2d1e16;
}

.tv-label {
  font-size: 8px;
  color: #6c5f53;
  letter-spacing: 1px;
  text-align: center;
}

/* ── Intro Bar ── */
.intro-bar {
  background: #80966a;
  color: #fffaf3;
  border: 3px solid #4a3b2e;
  box-shadow: 4px 4px 0 #2d1e16;
  text-align: center;
  padding: 12px;
  font-size: 10px;
  margin-bottom: 12px;
}

/* ── Main Grid ── */
.main-grid {
  display: grid;
  grid-template-columns: 170px 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  margin-bottom: 12px;
}

.bday { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.tri  { grid-column: 2; grid-row: 1; }
.hob  { grid-column: 3; grid-row: 1; }
.lik  { grid-column: 4; grid-row: 1; }
.hat  { grid-column: 2; grid-row: 2; }
.inv  { grid-column: 3 / 5; grid-row: 2; }

/* ── Social Buttons ── */
.socials {
  max-width: 900px;
  margin: 16px auto 20px;
  text-align: center;
}

.btn {
  display: inline-block;
  margin: 4px 6px;
  padding: 8px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  text-decoration: none;
  color: #2d1e16;
  background: #ffdfb2;
  border: 3px solid #4a3b2e;
  box-shadow: 3px 3px 0 #2d1e16;
  transition: all 0.15s ease;
}

.btn:hover {
  background: #4a7856;
  color: #fffaf3;
  transform: translateY(-3px);
  box-shadow: 3px 6px 0 #2d1e16;
}

/* ── Blog ── */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-post {
  background: #fffaf3;
  border: 3px solid #4a3b2e;
  box-shadow: 4px 4px 0 #2d1e16;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-post:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #2d1e16;
}

.blog-header {
  background: #d4b07d;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #4a3b2e;
  flex-wrap: wrap;
  gap: 6px;
}

.blog-title { font-size: 10px; color: #2d1e16; }
.blog-date  { font-size: 8px;  color: #6c5f53; }

.blog-body {
  padding: 12px;
  font-size: 9px;
  line-height: 2;
  color: #3d2e20;
}

.blog-tags {
  padding: 8px 12px;
  border-top: 2px dashed #c4a07d;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.blog-tag {
  font-size: 8px;
  background: #ffdfb2;
  border: 2px solid #4a3b2e;
  padding: 2px 8px;
  color: #2d1e16;
}

.new-badge {
  font-size: 8px;
  background: #d17842;
  color: #fffaf3;
  border: 2px solid #2d1e16;
  padding: 2px 6px;
  margin-left: 8px;
  animation: blinkCursor 1.2s step-end infinite;
}

/* ── Sparkle Effect ── */
.sparkle {
  position: fixed;
  pointer-events: none;
  font-size: 14px;
  animation: sparkleFade 0.7s ease forwards;
  z-index: 9999;
}