@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");

:root {
  --teal-fill-top: #ccfbf1;
  --teal-fill-mid: #2dd4bf;
  --teal-fill-bottom: #14b8a6;
  --teal-stroke: #0f766e;
  --teal-shadow-1: #0d9488;
  --teal-shadow-2: #115e59;
  --teal-glow: rgba(45, 212, 191, 0.4);
  --teal-text: #5eead4;
  --teal-muted: #99f6e4;
  --teal-accent: #2dd4bf;
  --teal-accent-dark: #0f766e;
  --teal-btn-bg: linear-gradient(
    180deg,
    #99f6e4 0%,
    #2dd4bf 50%,
    #14b8a6 100%
  );
}

body.lex-games-brand {
  font-family: "Fredoka One", "Comic Sans MS", cursive;
  color: var(--teal-text);
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath fill='%232dd4bf' fill-opacity='0.28' d='M48 72 C48 72 24 54 24 36 C24 26 32 20 40 26 C44 30 48 36 48 36 C48 36 52 30 56 26 C64 20 72 26 72 36 C72 54 48 72 48 72'/%3E%3Cpath fill='%2314b8a6' fill-opacity='0.16' d='M18 28 C18 28 8 20 8 14 C8 10 11 8 14 10 C15 11 16 12 16 12 C16 12 17 11 18 10 C21 8 24 10 24 14 C24 20 18 28 18 28'/%3E%3Cpath fill='%235eead4' fill-opacity='0.12' d='M78 62 C78 62 70 54 70 48 C70 44 73 42 75 44 C76 45 77 46 77 46 C77 46 78 45 79 44 C81 42 84 44 84 48 C84 54 78 62 78 62'/%3E%3C/svg%3E");
  background-size: 96px 96px;
  min-height: 100vh;
}

.bubble-text,
body.lex-games-brand h1 {
  font-family: "Fredoka One", "Comic Sans MS", cursive;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.15;
  background: linear-gradient(
    180deg,
    var(--teal-fill-top) 0%,
    #5eead4 22%,
    var(--teal-fill-mid) 55%,
    var(--teal-fill-bottom) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 5px var(--teal-stroke);
  paint-order: stroke fill;
  filter:
    drop-shadow(0 5px 0 var(--teal-shadow-1))
    drop-shadow(0 10px 0 var(--teal-shadow-2))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 20px var(--teal-glow));
}

.bubble-text-md,
body.lex-games-brand h2,
body.lex-games-brand .game-title {
  font-family: "Fredoka One", "Comic Sans MS", cursive;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.2;
  background: linear-gradient(
    180deg,
    var(--teal-fill-top) 0%,
    #5eead4 30%,
    var(--teal-fill-mid) 60%,
    var(--teal-fill-bottom) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px var(--teal-stroke);
  paint-order: stroke fill;
  filter:
    drop-shadow(0 3px 0 var(--teal-shadow-1))
    drop-shadow(0 6px 0 var(--teal-shadow-2))
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 12px var(--teal-glow));
}

.bubble-text-sm,
body.lex-games-brand h3,
body.lex-games-brand p,
body.lex-games-brand label,
body.lex-games-brand span,
body.lex-games-brand li,
body.lex-games-brand td,
body.lex-games-brand th,
body.lex-games-brand strong,
body.lex-games-brand .pig-name,
body.lex-games-brand #mix-percent,
body.lex-games-brand #slime-name,
body.lex-games-brand .save-message,
body.lex-games-brand .empty-saves,
body.lex-games-brand .screen-intro,
body.lex-games-brand .play-tip,
body.lex-games-brand .game-description,
body.lex-games-brand .acc-color-hint,
body.lex-games-brand .color-label,
body.lex-games-brand .acc-color-label,
body.lex-games-brand #shape-label,
body.lex-games-brand .instructions,
body.lex-games-brand #final-score,
body.lex-games-brand #score,
body.lex-games-brand #high-score {
  font-family: "Fredoka One", "Comic Sans MS", cursive;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: var(--teal-text);
  -webkit-text-stroke: 1.5px var(--teal-stroke);
  paint-order: stroke fill;
  filter:
    drop-shadow(0 2px 0 var(--teal-shadow-1))
    drop-shadow(0 0 8px rgba(45, 212, 191, 0.25));
}

body.lex-games-brand input[type="text"],
body.lex-games-brand input:not([type="color"]):not([type="range"]):not([type="checkbox"]) {
  font-family: "Fredoka One", "Comic Sans MS", cursive;
  color: var(--teal-text);
  border-color: var(--teal-stroke) !important;
}

body.lex-games-brand button:not(.color-dot):not(.color-btn),
body.lex-games-brand .play-button,
body.lex-games-brand .back-button,
body.lex-games-brand .back-to-games,
body.lex-games-brand .primary-btn,
body.lex-games-brand .action-btn,
body.lex-games-brand #start-button,
body.lex-games-brand #restart-button {
  font-family: "Fredoka One", "Comic Sans MS", cursive;
  font-weight: 400;
  letter-spacing: 0.04em;
  background: var(--teal-btn-bg) !important;
  color: var(--teal-accent-dark) !important;
  border: 3px solid var(--teal-stroke) !important;
  -webkit-text-stroke: 1px rgba(6, 78, 59, 0.35);
  box-shadow:
    0 4px 0 var(--teal-shadow-1),
    0 6px 12px rgba(0, 0, 0, 0.35),
    0 0 14px var(--teal-glow) !important;
}

body.lex-games-brand button:not(.color-dot):not(.color-btn):hover,
body.lex-games-brand .play-button:hover,
body.lex-games-brand .back-button:hover,
body.lex-games-brand .back-to-games:hover,
body.lex-games-brand .primary-btn:not(:disabled):hover,
body.lex-games-brand #start-button:hover,
body.lex-games-brand #restart-button:hover {
  transform: scale(1.05);
  filter: brightness(1.08);
}

body.lex-games-brand button.active,
body.lex-games-brand .option-btn.active,
body.lex-games-brand .acc-btn.active,
body.lex-games-brand .animal-btn.active {
  border-color: var(--teal-fill-top) !important;
  background: rgba(45, 212, 191, 0.25) !important;
  box-shadow: 0 0 12px var(--teal-glow) !important;
}

body.lex-games-brand a:not(.play-button):not(.back-button):not(.back-to-games) {
  color: var(--teal-muted);
  -webkit-text-stroke: 1px var(--teal-stroke);
}

.teal-paw-emoji {
  display: inline-block;
  line-height: 1;
  filter: sepia(1) saturate(5) hue-rotate(128deg) brightness(0.9)
    drop-shadow(0 2px 8px rgba(45, 212, 191, 0.45));
}

.teal-paw-emoji--hero {
  font-size: 5rem;
}

.teal-paw-emoji--header {
  font-size: 2.75rem;
}

.shape-run-logo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
}

.shape-run-logo__square,
.shape-run-logo__circle {
  flex-shrink: 0;
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  background: linear-gradient(
    180deg,
    var(--teal-fill-top) 0%,
    var(--teal-fill-mid) 55%,
    var(--teal-fill-bottom) 100%
  );
  border: 3px solid var(--teal-stroke);
  box-shadow:
    0 3px 0 var(--teal-shadow-1),
    0 0 12px var(--teal-glow);
  overflow: hidden;
}

.shape-run-logo__square {
  border-radius: 4px;
}

.shape-run-logo__circle {
  border-radius: 50%;
}

.shape-run-logo__triangle {
  flex-shrink: 0;
  position: relative;
  width: 2.5rem;
  height: 2.15rem;
  filter:
    drop-shadow(0 3px 0 var(--teal-shadow-1))
    drop-shadow(0 0 12px var(--teal-glow));
}

.shape-run-logo__triangle-inner {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--teal-fill-top) 0%,
    var(--teal-fill-mid) 55%,
    var(--teal-fill-bottom) 100%
  );
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  overflow: hidden;
}

.shape-run-logo__face {
  position: absolute;
  inset: 18% 14% 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.shape-run-logo__triangle .shape-run-logo__face {
  inset: 42% 18% 10%;
}

.shape-run-logo__eyes {
  display: flex;
  justify-content: space-between;
  width: 72%;
}

.shape-run-logo__eye {
  width: 0.34rem;
  height: 0.34rem;
  background: var(--teal-stroke);
  border-radius: 50%;
}

.shape-run-logo__eye--wink {
  width: 0.42rem;
  height: 0.1rem;
  margin-top: 0.12rem;
  border-radius: 999px;
}

.shape-run-logo__mouth {
  position: relative;
  flex-shrink: 0;
}

.shape-run-logo__mouth--sad {
  width: 0.72rem;
  height: 0.34rem;
  border-top: 2px solid var(--teal-stroke);
  border-radius: 50% 50% 0 0;
}

.shape-run-logo__mouth--happy {
  width: 0.78rem;
  height: 0.38rem;
  border-bottom: 2px solid var(--teal-stroke);
  border-radius: 0 0 50% 50%;
}

.shape-run-logo__mouth--funny {
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--teal-stroke);
  border-radius: 50%;
}

.shape-run-logo__mouth--funny::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.12rem;
  width: 0.34rem;
  height: 0.22rem;
  transform: translateX(-50%);
  background: #ff6b8a;
  border: 1px solid var(--teal-stroke);
  border-top: none;
  border-radius: 0 0 50% 50%;
}

.shape-run-logo--hero {
  gap: 1.1rem;
}

.shape-run-logo--hero .shape-run-logo__square,
.shape-run-logo--hero .shape-run-logo__circle {
  width: 3.5rem;
  height: 3.5rem;
}

.shape-run-logo--hero .shape-run-logo__triangle {
  width: 3.85rem;
  height: 3.35rem;
}

.shape-run-logo--hero .shape-run-logo__eye {
  width: 0.52rem;
  height: 0.52rem;
}

.shape-run-logo--hero .shape-run-logo__eye--wink {
  width: 0.62rem;
  height: 0.14rem;
  margin-top: 0.18rem;
}

.shape-run-logo--hero .shape-run-logo__mouth--sad {
  width: 1.1rem;
  height: 0.52rem;
  border-top-width: 3px;
}

.shape-run-logo--hero .shape-run-logo__mouth--happy {
  width: 1.2rem;
  height: 0.58rem;
  border-bottom-width: 3px;
}

.shape-run-logo--hero .shape-run-logo__mouth--funny {
  width: 0.85rem;
  height: 0.85rem;
  border-width: 3px;
}

.shape-run-logo--hero .shape-run-logo__mouth--funny::after {
  width: 0.52rem;
  height: 0.34rem;
  bottom: -0.18rem;
}

/* Sticky Slime Simulator — teal goo dripping from ceiling */
.slime-drip-logo {
  display: block;
  flex-shrink: 0;
  filter:
    drop-shadow(0 4px 0 var(--teal-shadow-1))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 18px var(--teal-glow));
}

.slime-drip-logo object,
.slime-drip-logo img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.slime-drip-logo--hero {
  width: 9.5rem;
  height: 10.75rem;
}

.slime-drip-logo--header {
  width: 3.25rem;
  height: 3.75rem;
}

/* Nail Divas — Oakley hand with teal nails */
.nail-divas-logo {
  display: block;
  flex-shrink: 0;
  filter:
    drop-shadow(0 4px 0 var(--teal-shadow-1))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 16px var(--teal-glow));
}

.nail-divas-logo object,
.nail-divas-logo img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.nail-divas-logo--hero {
  width: 10.5rem;
  height: 9.5rem;
}

.nail-divas-logo--header {
  width: 3.5rem;
  height: 3.25rem;
}

/* Sticker Factory — sticker on backing sheet */
.sticker-factory-logo {
  display: block;
  flex-shrink: 0;
  filter:
    drop-shadow(0 4px 0 var(--teal-shadow-1))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 16px var(--teal-glow));
}

.sticker-factory-logo object,
.sticker-factory-logo img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sticker-factory-logo--hero {
  width: 7.5rem;
  height: 7.5rem;
}

.sticker-factory-logo--header {
  width: 3.25rem;
  height: 3.25rem;
}

.game-preview--slime {
  background: linear-gradient(180deg, #134e4a 0%, #0f2928 45%, #0c1a1a 100%);
  overflow: hidden;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-brand h1 {
  margin: 0;
}