:root {
  --bg: #c0c0c0;
  --accent: #ff00cc;
  --accent-2: #00e5ff;
  --accent-3: #ffe600;
  --text: #111;
  --panel: #f1f1f1;
  --shadow: #000;
  --slime: #00ff88;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "MS Sans Serif", "Tahoma", "Verdana", "Courier New", system-ui, sans-serif;
  background: repeating-conic-gradient(from 0deg, #bdbdbd 0 15deg, #d7d7d7 15deg 30deg);
  color: var(--text);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  animation: vibrate 0.6s infinite;
  letter-spacing: 0.4px;
  text-shadow: 0 0 1px rgba(0, 255, 120, 0.6);
}

body.tito-modal-open,
body.tito-open-boost {
  animation: none;
  transform: none;
}

body.tito-modal-open .page,
body.tito-open-boost .page {
  animation: none;
  transform: none;
}

body::before {
  content: "";
  position: fixed;
  inset: -30vmax;
  background: conic-gradient(from 90deg, #ff00cc, #00e5ff, #ffe600, #ff00cc);
  opacity: 0.2;
  mix-blend-mode: multiply;
  animation: spin 40s linear infinite;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: -35vmax;
  background: repeating-radial-gradient(circle, rgba(0, 0, 0, 0.15) 0 6px, transparent 6px 18px);
  opacity: 0.35;
  animation: spinReverse 26s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  position: relative;
  z-index: 2;
  filter: contrast(1.05) saturate(1.1);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.tito-overlay,
.tito-modal,
.tito-widget {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

.tito-widget {
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
}

.tito-modal__content,
.tito-widget__content,
.tito-modal__body {
  max-height: 90vh !important;
  overflow: auto !important;
}

.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.08) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.4;
  z-index: 0;
}

.slime-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 255, 120, 0.5) 0 16px, transparent 17px),
    radial-gradient(circle at 45% 55%, rgba(0, 200, 80, 0.45) 0 22px, transparent 23px),
    radial-gradient(circle at 70% 35%, rgba(0, 255, 140, 0.5) 0 18px, transparent 19px),
    radial-gradient(circle at 85% 75%, rgba(0, 180, 90, 0.45) 0 24px, transparent 25px),
    radial-gradient(circle at 30% 80%, rgba(0, 255, 120, 0.4) 0 14px, transparent 15px),
    linear-gradient(90deg, rgba(0, 255, 120, 0.15), rgba(0, 180, 90, 0.15));
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: slimeFlow 6s linear infinite;
  pointer-events: none;
  z-index: 3;
}

.slime {
  position: fixed;
  left: -10vw;
  right: -10vw;
  height: 120px;
  background:
    radial-gradient(circle at 10% 30%, rgba(0, 255, 120, 0.9) 0 18px, transparent 19px),
    radial-gradient(circle at 30% 60%, rgba(0, 200, 80, 0.8) 0 22px, transparent 23px),
    radial-gradient(circle at 55% 20%, rgba(0, 255, 140, 0.9) 0 16px, transparent 17px),
    radial-gradient(circle at 80% 70%, rgba(0, 180, 90, 0.8) 0 20px, transparent 21px),
    linear-gradient(90deg, rgba(0, 255, 120, 0.8), rgba(0, 180, 90, 0.8));
  filter: blur(0.2px) saturate(1.4);
  mix-blend-mode: screen;
  z-index: 1;
  animation: slimeDrip 4s ease-in-out infinite;
  pointer-events: none;
}

.slime-top {
  top: 0;
  height: 180px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 45%,
    92% 30%,
    85% 60%,
    70% 40%,
    55% 70%,
    42% 35%,
    28% 75%,
    12% 45%,
    0 65%
  );
  animation: slimeDripTop 3.2s ease-in-out infinite;
}

.slime-bottom {
  bottom: -10px;
  transform: rotate(180deg);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 92% 30%, 85% 55%, 70% 35%, 55% 60%, 42% 35%, 28% 65%, 12% 40%, 0 55%);
  animation-delay: 1.4s;
}

.flying-stickers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.word-cloud {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.word {
  position: absolute;
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.75);
  border: 2px solid #000;
  animation: bouncey 6s linear infinite;
}

.word-1 { top: 12%; left: 8%; animation-duration: 7s; }
.word-2 { top: 30%; left: 70%; animation-duration: 6s; background: #ffe600; }
.word-3 { top: 60%; left: 15%; animation-duration: 8s; background: #00e5ff; }
.word-4 { top: 72%; left: 65%; animation-duration: 5s; background: #ff00cc; color: #fff; }
.word-5 { top: 45%; left: 40%; animation-duration: 9s; }
.word-6 { top: 20%; left: 50%; animation-duration: 7.5s; }
.word-7 { top: 80%; left: 30%; animation-duration: 6.5s; background: #0f0; }
.word-8 { top: 8%; left: 78%; animation-duration: 5.5s; background: #111; color: #fff; }

.sticker {
  position: absolute;
  padding: 6px 12px;
  background: #000;
  color: #fff;
  font-weight: 700;
  border: 2px solid #fff;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--accent);
  animation: flyAcross 14s linear infinite;
  transform: translate3d(-40vw, 0, 0) rotate(-6deg);
}

.sticker-1 { top: 10%; left: -35%; animation-delay: 0s; }
.sticker-2 { top: 30%; left: -50%; animation-delay: 2s; background: var(--accent); color: #000; }
.sticker-3 { top: 55%; left: -45%; animation-delay: 4s; background: var(--accent-2); color: #000; }
.sticker-4 { top: 75%; left: -60%; animation-delay: 6s; background: var(--accent-3); color: #000; }

.popups {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.popup {
  position: absolute;
  width: 200px;
  background: #fefefe;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000;
  animation: drift 18s linear infinite;
}

.popup-title {
  background: #000;
  color: #fff;
  font-size: 0.8rem;
  padding: 4px 6px;
  text-transform: uppercase;
}

.popup-body {
  padding: 8px;
  font-size: 0.8rem;
}

.popup-1 { top: 8%; left: -25%; animation-delay: 1s; }
.popup-2 { top: 46%; left: -35%; animation-delay: 4s; background: #ffe600; }
.popup-3 { top: 70%; left: -45%; animation-delay: 7s; background: #00e5ff; }

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
  position: relative;
  z-index: 1;
  animation: wobble 8s ease-in-out infinite;
  mix-blend-mode: multiply;
}

.logo-box {
  background: linear-gradient(135deg, #ffffff, #f5f5f5);
  border: 3px double #000;
  padding: 12px;
  box-shadow: 8px 8px 0 #000;
}

.logo {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--accent), -3px -3px 0 var(--accent-2);
  animation: jitter 3s steps(2) infinite;
  filter: blur(0.2px) contrast(1.3);
}

.logo-year {
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #000;
  background: var(--accent-3);
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid #000;
  margin-top: 6px;
  transform: skewX(-8deg);
}

.tagline {
  margin: 12px 0 8px;
  font-size: 1rem;
  font-style: italic;
  background: #fff;
  padding: 6px 10px;
  border: 2px inset #000;
  transform: rotate(-1deg);
  filter: blur(0.3px);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  background: #000;
  color: #fff;
  padding: 4px 8px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  animation: vibrateSoft 0.8s infinite;
  border: 2px solid #fff;
  box-shadow: 3px 3px 0 #222;
  transform: rotate(-2deg);
}

.crt {
  background: #040404;
  color: #39ff14;
  border: 4px ridge #666;
  padding: 16px;
  height: 100%;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
  font-family: "Courier New", monospace;
  filter: contrast(1.4);
}

.crt::after {
  content: "";
  position: absolute;
  inset: -20% 0 auto 0;
  height: 60px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.4), transparent);
  animation: scan 5s linear infinite;
  pointer-events: none;
}

.crt-title {
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.ticker {
  background: #101010;
  border: 1px solid #00ff9d;
  padding: 8px;
  font-family: "Courier New", monospace;
  animation: jitter 2s steps(2) infinite;
}

.secret-hint {
  font-size: 0.75rem;
  color: #00ff9d;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: blink 1.2s steps(2) infinite;
}

.grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  position: relative;
  z-index: 1;
}

.card {
  background: var(--panel);
  border: 2px solid #000;
  padding: 16px;
  box-shadow: 6px 6px 0 #000;
  position: relative;
  overflow: hidden;
  animation: tilt 9s ease-in-out infinite;
  will-change: transform;
  filter: saturate(1.2);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px dotted var(--accent);
  opacity: 0.2;
  pointer-events: none;
}

.card h2 {
  margin-top: 0;
  background: #000;
  color: #fff;
  padding: 6px 10px;
  font-size: 1.1rem;
  text-shadow: 2px 2px 0 var(--accent);
  transform: translateX(-6px) rotate(-1deg);
}

.neon {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
  padding: 6px 10px;
  font-weight: 700;
  margin-top: 12px;
  text-shadow: 1px 1px 0 #000;
}

.blurb {
  font-weight: 700;
  color: #000;
  background: #ffb6f5;
  display: inline-block;
  padding: 6px 8px;
  border: 2px dashed #000;
}

.split {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  z-index: 1;
  position: relative;
}

.panel {
  background: #fffdf0;
  border: 3px groove #000;
  padding: 16px;
  box-shadow: -6px 6px 0 #000;
  animation: floaty 14s ease-in-out infinite;
  font-family: "Times New Roman", serif;
}

.grid-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.chip {
  background: #e0f7ff;
  border: 2px solid #000;
  padding: 6px;
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  animation: jitter 3.2s steps(2) infinite;
}

.warning {
  margin-top: 14px;
  padding: 10px;
  background: #000;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: pulse 3s ease-in-out infinite;
}

.warning span {
  color: #ff5959;
}

.cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border: 3px solid #000;
  background: linear-gradient(135deg, #fff 0%, #f4f4f4 100%);
  box-shadow: 8px 8px 0 #000;
  animation: pulse 6s ease-in-out infinite;
  will-change: transform;
  text-shadow: 1px 1px 0 var(--slime);
}

.btn {
  background: #000;
  color: #fff;
  border: 2px outset #888;
  padding: 10px 18px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: jitter 2.6s steps(2) infinite;
}

.tito-widget-button {
  display: inline-block;
  background: linear-gradient(90deg, #ffe600, #00e5ff, #ff00cc);
  color: #000;
  border: 4px double #000;
  padding: 12px 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #fff;
  box-shadow: 0 0 0 3px #000, 8px 8px 0 #000;
  cursor: pointer;
  animation: throb 1.2s infinite;
}

.tito-widget-button:hover {
  transform: translate(-3px, -3px) scale(1.02) rotate(-1deg);
  box-shadow: 0 0 0 3px #000, 12px 12px 0 #000;
}

@keyframes throb {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.05); filter: saturate(1.6); }
}

.btn:hover {
  background: var(--accent);
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 4px 4px 0 #000;
}

.btn-alt {
  background: var(--accent-2);
  color: #000;
  border: 2px inset #000;
}

.btn-warp {
  margin-top: 10px;
  background: #111;
  border: 2px dashed var(--accent-3);
  color: var(--accent-3);
}

.btn-glitch {
  margin-top: 10px;
  background: #ff00cc;
  border: 2px solid #000;
  color: #000;
}

.small {
  font-size: 0.85rem;
  margin-top: 8px;
}

.footer {
  margin-top: 30px;
  padding: 12px 0;
  border-top: 3px double #000;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 0.8rem;
  animation: jitter 4s steps(2) infinite;
}

.divider {
  margin: 0 6px;
}

.counter {
  background: #000;
  color: #0f0;
  padding: 3px 6px;
  font-family: "Courier New", monospace;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  place-items: center;
  z-index: 5;
}

.modal-window {
  background: #fff;
  border: 4px solid #000;
  padding: 18px;
  max-width: 900px;
  width: min(95%, 900px);
  box-shadow: 10px 10px 0 #000;
}

.modal-title {
  font-weight: 800;
  font-size: 1.2rem;
  background: #000;
  color: #fff;
  padding: 6px 8px;
  margin-bottom: 12px;
}

.modal-embed {
  border: 3px inset #000;
  background: #f2f2f2;
  padding: 8px;
  margin: 12px 0;
}

.modal-embed iframe {
  width: 100%;
  height: min(70vh, 640px);
  border: 0;
  background: #fff;
}

.modal.show {
  display: grid;
}

.easter-egg {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0, 0, 0, 0.75);
  place-items: center;
  z-index: 6;
}

.easter-egg.show {
  display: grid;
}

.egg-window {
  background: linear-gradient(120deg, #fff, #ffe600, #00e5ff);
  border: 4px solid #000;
  padding: 20px;
  box-shadow: 12px 12px 0 #000;
  text-align: center;
  animation: wobble 1.6s ease-in-out infinite;
}

.egg-title {
  font-size: 1.1rem;
  font-weight: 800;
  background: #000;
  color: #fff;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.warp-mode body,
.warp-mode {
  animation: warp 0.6s infinite linear;
  filter: hue-rotate(180deg) saturate(1.4);
}

.panic-glitch {
  animation: glitch 0.2s infinite steps(2);
}

@keyframes floaty {
  0% { transform: translateX(-10vw) rotate(-4deg); }
  50% { transform: translateX(110vw) rotate(6deg); }
  100% { transform: translateX(220vw) rotate(-8deg); }
}

@keyframes flyAcross {
  0% { transform: translate3d(-40vw, -10px, 0) rotate(-8deg); }
  50% { transform: translate3d(70vw, 10px, 0) rotate(6deg); }
  100% { transform: translate3d(160vw, -10px, 0) rotate(-10deg); }
}

@keyframes drift {
  0% { transform: translate3d(-30vw, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(60vw, 10vh, 0) rotate(4deg); }
  100% { transform: translate3d(150vw, -5vh, 0) rotate(-6deg); }
}

@keyframes wobble {
  0%, 100% { transform: rotate(-0.3deg); }
  50% { transform: rotate(0.3deg); }
}

@keyframes jitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(2px, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes scan {
  0% { transform: translateY(-120%); }
  100% { transform: translateY(320%); }
}

@keyframes blink {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes tilt {
  0%, 100% { transform: rotate(-0.2deg); }
  50% { transform: rotate(0.2deg); }
}

@keyframes glitch {
  0% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
  25% { transform: translate(-3px, 2px) skewX(3deg); }
  50% { transform: translate(2px, -3px) skewX(-3deg); }
  75% { transform: translate(-2px, 1px) skewX(2deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

@keyframes warp {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.01) rotate(0.3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes slimeDrip {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(6px) scaleY(1.08); }
}

@keyframes slimeDripTop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  40% { transform: translateY(10px) scaleY(1.12); }
  70% { transform: translateY(4px) scaleY(1.04); }
}

@keyframes slimeFlow {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(6px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes vibrate {
  0% { transform: translate(0, 0); }
  20% { transform: translate(1px, -1px); }
  40% { transform: translate(-1px, 1px); }
  60% { transform: translate(2px, 0); }
  80% { transform: translate(-2px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes vibrateSoft {
  0% { transform: translate(0, 0); }
  50% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes bouncey {
  0% { transform: translate(0, 0) rotate(-2deg); }
  20% { transform: translate(30px, 10px) rotate(2deg); }
  40% { transform: translate(-20px, 30px) rotate(-4deg); }
  60% { transform: translate(40px, -10px) rotate(3deg); }
  80% { transform: translate(-10px, -20px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(2deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spinReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@media (max-width: 640px) {
  .badges {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .sticker {
    font-size: 0.7rem;
  }

  .popup {
    width: 160px;
  }

  .word {
    font-size: 0.75rem;
  }

  body {
    animation-duration: 0.9s;
  }
}