/* Talkskill shared site styles — light default, .dark overrides */
body { -webkit-tap-highlight-color: transparent; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.glass { background: rgba(255,255,255,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dark .glass { background: rgba(15,23,42,0.6); }
.bouncy { transition: transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease, border-color 180ms ease; }
.bouncy:hover { transform: translateY(-3px); }
.bouncy:active { transform: scale(0.965); }
.meter-fill { transition: width 600ms cubic-bezier(.22,1,.36,1), background-color 400ms ease, box-shadow 400ms ease; }
.energy-fill { transition: width 500ms cubic-bezier(.22,1,.36,1); }
@keyframes flicker { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.15) rotate(3deg); } }
.streak-flame { display: inline-block; animation: flicker 1.6s ease-in-out infinite; }
/* Entrance animations are transform-only: the visible end-state is the base style. */
@keyframes bubbleIn { from { transform: translateY(10px) scale(.96); } to { transform: none; } }
.bubble { animation: bubbleIn 260ms cubic-bezier(.22,1,.36,1); }
@keyframes dotPulse { 0%,80%,100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.typing-dot { animation: dotPulse 1.1s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(460px) rotate(720deg); opacity: 0; }
}
.confetti-piece { position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px; animation: confettiFall 2.6s linear forwards; }
@keyframes overlayIn { from { transform: scale(.94); } to { transform: none; } }
.overlay-card { animation: overlayIn 320ms cubic-bezier(.22,1,.36,1); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.shake { animation: shake 320ms ease; }

/* ===== Floating +/- delta popups (interest meter & XP) =====
   A game-style number that springs up, pops, then drifts away. */
@keyframes deltaPop {
  0%   { transform: translate(-50%, 2px) scale(.4); opacity: 0; }
  16%  { transform: translate(-50%, -5px) scale(1.25); opacity: 1; }
  42%  { transform: translate(-50%, -13px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -46px) scale(.9); opacity: 0; }
}
.delta-pop {
  position: absolute; left: 50%; top: -4px; z-index: 50;
  font-weight: 900; font-size: 15px; line-height: 1; white-space: nowrap;
  pointer-events: none; text-shadow: 0 1px 3px rgba(15,23,42,.25);
  animation: deltaPop 1150ms cubic-bezier(.22,1,.36,1) forwards;
}
.delta-pop.up   { color: #16a34a; }
.delta-pop.down { color: #ef4444; }
.dark .delta-pop.up   { color: #4ade80; }
.dark .delta-pop.down { color: #f87171; }

/* Meter "juice": a quick vertical squash-stretch on change */
@keyframes meterPulse { 0% { transform: scaleY(1); } 35% { transform: scaleY(1.65); } 100% { transform: scaleY(1); } }
.meter-pulse { animation: meterPulse 480ms cubic-bezier(.22,1,.36,1); transform-origin: center; }

/* XP bar: a bright shimmer sweep when XP is gained */
@keyframes xpShimmer { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
.xp-shimmer { position: relative; overflow: hidden; }
.xp-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%);
  animation: xpShimmer 850ms ease-out 1;
}

/* Level-up badge pop (badge is centred with translateX(-50%) — keep it) */
@keyframes badgePop {
  0%   { transform: translateX(-50%) scale(1) rotate(0); }
  30%  { transform: translateX(-50%) scale(1.55) rotate(-10deg); }
  60%  { transform: translateX(-50%) scale(1.12) rotate(7deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0); }
}
.badge-pop { animation: badgePop 720ms cubic-bezier(.22,1,.36,1); }

/* Avatar cheer when you level up */
@keyframes cheer {
  0%,100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-5px) rotate(-7deg); }
  60% { transform: translateY(-2px) rotate(6deg); }
}
.cheer { animation: cheer 620ms ease; }

/* ===== Icon micro-animations ===== */
/* Springy hover pop for icons inside cards (.bouncy) and links */
.icon-pop { display: inline-flex; transition: transform .25s cubic-bezier(.34,1.56,.64,1); will-change: transform; }
.bouncy:hover .icon-pop, a:hover .icon-pop, .icon-pop:hover { transform: scale(1.22) rotate(-7deg); }
/* Gentle idle float for the hero feature icons (staggered) */
@keyframes iconBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.icon-bob { animation: iconBob 3.2s ease-in-out infinite; }
.icon-bob:nth-of-type(1) { animation-delay: 0s; }
.bob-1 { animation-delay: .0s; } .bob-2 { animation-delay: .5s; } .bob-3 { animation-delay: 1s; }

/* ===== 3D icons ===== */
/* Rounded "chip" icons (feature / philosophy / doors cards): glossy bevel,
   depth shadow, extruded glyph, and a tilt-into-3D on hover. */
[role="img"][class*="rounded-2xl"] {
  position: relative; transform-style: preserve-3d;
  text-shadow: 0 1.5px 2px rgba(0,0,0,.30);
  box-shadow:
    0 9px 18px -7px rgba(15,23,42,.5),       /* cast shadow = depth   */
    inset 0 2px 2px rgba(255,255,255,.6),     /* top bevel highlight   */
    inset 0 -5px 7px rgba(0,0,0,.22);         /* bottom inner shadow   */
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
[role="img"][class*="rounded-2xl"]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.55), rgba(255,255,255,0) 52%);
}
.bouncy:hover [role="img"][class*="rounded-2xl"]:not(.icon-3d-float),
a:hover [role="img"][class*="rounded-2xl"]:not(.icon-3d-float),
[role="img"][class*="rounded-2xl"]:not(.icon-3d-float):hover {
  transform: perspective(420px) rotateX(15deg) rotateY(-17deg) translateZ(10px) scale(1.06);
  box-shadow: 0 18px 28px -8px rgba(15,23,42,.55), inset 0 2px 2px rgba(255,255,255,.6), inset 0 -5px 7px rgba(0,0,0,.22);
}
/* Perpetual gentle 3D float (hero feature icons) */
.icon-3d-float { animation: icon3dFloat 4.6s ease-in-out infinite; }
.icon-3d-float:nth-of-type(1) { animation-delay: 0s; }
@keyframes icon3dFloat {
  0%, 100% { transform: perspective(520px) translateY(0)    rotateX(0deg)  rotateY(-13deg); }
  50%      { transform: perspective(520px) translateY(-7px) rotateX(13deg) rotateY(13deg); }
}
/* Round avatar icons (profile + NPC) get spherical depth */
[role="img"][class*="rounded-full"] {
  box-shadow: 0 8px 16px -6px rgba(15,23,42,.45), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -5px 7px rgba(0,0,0,.28);
  text-shadow: 0 1.5px 2px rgba(0,0,0,.28);
}
/* Small inline emoji icons (nav, etc.): give the glyph itself depth */
.icon-pop { text-shadow: 0 2px 2px rgba(0,0,0,.32); }

/* ===== Level-up celebration ===== */
@keyframes levelToastIn {
  0%   { transform: translate(-50%, -34px) scale(.55); opacity: 0; }
  16%  { transform: translate(-50%, 0) scale(1.14); opacity: 1; }
  30%  { transform: translate(-50%, 0) scale(1); opacity: 1; }
  78%  { transform: translate(-50%, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -24px) scale(.96); opacity: 0; }
}
.level-toast {
  position: fixed; left: 50%; top: 74px; z-index: 60; transform: translateX(-50%);
  padding: 10px 22px; border-radius: 9999px; white-space: nowrap; pointer-events: none;
  font-weight: 900; font-size: 16px; letter-spacing: .01em; color: #fff;
  background: linear-gradient(100deg, #f59e0b, #f97316 45%, #0d9488);
  background-size: 180% 100%; animation: levelToastIn 2600ms cubic-bezier(.22,1,.36,1) forwards, sheen 2600ms linear;
  box-shadow: 0 14px 36px -8px rgba(245,158,11,.6), 0 0 0 4px rgba(255,255,255,.55);
}
.dark .level-toast { box-shadow: 0 14px 36px -8px rgba(245,158,11,.55), 0 0 0 4px rgba(2,6,23,.6); }
@keyframes sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* Sparkle burst radiating from the level badge */
@keyframes sparkleOut {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); opacity: 0; }
}
.spark { position: absolute; left: 50%; top: 50%; font-size: 12px; pointer-events: none; z-index: 50; animation: sparkleOut 720ms ease-out forwards; }

/* ===== Streak-up celebration ===== */
@keyframes streakFlare {
  0%   { transform: scale(1) rotate(0); filter: drop-shadow(0 0 0 rgba(249,115,22,0)); }
  40%  { transform: scale(1.85) rotate(-8deg); filter: drop-shadow(0 0 12px rgba(249,115,22,.95)); }
  70%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 0 rgba(249,115,22,0)); }
}
.streak-flare { animation: streakFlare 760ms cubic-bezier(.22,1,.36,1) !important; }
@keyframes countPop { 0% { transform: scale(1); } 40% { transform: scale(1.7); color: #f97316; } 100% { transform: scale(1); } }
.count-pop { animation: countPop 640ms cubic-bezier(.22,1,.36,1); display: inline-block; }

/* ===== "MINI" corner-ribbon sticker (top-right of a card) ===== */
.ribbon-mini {
  position: absolute; top: 16px; right: -34px; z-index: 5;
  transform: rotate(45deg);
  padding: 4px 40px;
  font-size: 11px; font-weight: 900; letter-spacing: .14em; line-height: 1;
  color: #fff; text-align: center;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  box-shadow: 0 4px 10px -2px rgba(249,115,22,.55), inset 0 0 0 1px rgba(255,255,255,.35);
  pointer-events: none;
}
/* little folded "tails" so it reads as a real ribbon wrapped over the corner */
.ribbon-mini::before, .ribbon-mini::after {
  content: ''; position: absolute; bottom: -5px; border: 3px solid #b45309; border-radius: 1px;
}
.ribbon-mini::before { left: 0;  border-right-color: transparent; border-bottom-color: transparent; }
.ribbon-mini::after  { right: 0; border-left-color: transparent;  border-bottom-color: transparent; }

/* ===== Hero banner logo (right side) ===== */
.hero-banner {
  z-index: 0;
  filter: drop-shadow(0 18px 40px rgba(13,148,136,.45));
  animation: heroFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-14px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-flame, .typing-dot, .confetti-piece, .icon-bob, .hero-banner, .icon-3d-float { animation: none; }
  .bouncy, .meter-fill, .energy-fill, .icon-pop, [role="img"][class*="rounded-2xl"] { transition: none; }
  .delta-pop, .meter-pulse, .xp-shimmer::after, .badge-pop, .cheer,
  .level-toast, .spark, .streak-flare, .count-pop { animation-duration: .01ms; }
  img.icon3d { animation: none; transform: none; }
  .tc-ico, .tc-float, .tc-flame, .tc-pulse { animation: tcIcoFade .3s ease both; transform: none; }
  .msg-in { animation: msgIn .3s ease both; }
  #chat-log { animation: none; }
  #sim-card.tc-frame, .tc-stage::before { animation: none; }
}

/* Emojis rendered as images (see emoji.js). Sized to the current font so they
   sit inline like the glyphs they replace — including the large end-screen
   reactions inside text-5xl containers. */
img.tw-emoji {
  height: 1em;
  width: 1em;
  margin: 0 .06em 0 .08em;
  vertical-align: -0.12em;
  display: inline-block;
  object-fit: contain;
}

/* ============================================================
   Conversation panel — premium stage + frame
   ============================================================ */
/* During play the marketing sidebar steps aside and the panel takes centre
   stage (toggled by body.tc-playing from game.js). */
body.tc-playing .sim-copy { display: none; }
body.tc-playing .sim-grid {
  grid-template-columns: minmax(0, 430px);
  justify-content: center;
}
/* Keep the whole panel on one screen: the card is a flex column capped to the
   viewport, and only the message list scrolls inside it — header + choices stay
   put, nothing overflows the page. */
body.tc-playing #sim-card.tc-frame {
  display: flex;
  flex-direction: column;
  max-height: min(80vh, 600px);
  max-height: min(80dvh, 600px);
}
body.tc-playing #sim-card.tc-frame > #chat-log {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: none;
}
/* Trim page chrome a touch so the panel sits comfortably in view. */
body.tc-playing main { padding-top: 1rem; padding-bottom: 1.25rem; }

/* Ambient aura: a slow-rotating colour halo glowing behind the frame. */
.tc-stage { position: relative; }
.tc-stage::before {
  content: ""; position: absolute; inset: -22px; z-index: 0; border-radius: 44px;
  background: conic-gradient(from 0deg, #2dd4bf, #8b5cf6, #fb7185, #f59e0b, #2dd4bf);
  filter: blur(42px); opacity: 0.30; pointer-events: none;
  animation: stageAura 18s linear infinite;
}
.dark .tc-stage::before { opacity: 0.42; }
@keyframes stageAura { to { transform: rotate(360deg); } }
.tc-stage > * { position: relative; z-index: 1; }

/* The frame itself: a crisp card with a live gradient border + layered depth. */
#sim-card.tc-frame {
  --card-bg: #ffffff;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(130deg, #2dd4bf, #14b8a6 28%, #8b5cf6 68%, #fb7185) border-box;
  background-size: auto, 220% 220%;
  box-shadow:
    0 30px 64px -24px rgba(13, 148, 136, 0.45),
    0 10px 26px -14px rgba(15, 23, 42, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: frameShimmer 9s ease-in-out infinite;
}
.dark #sim-card.tc-frame {
  --card-bg: #0b1220;
  box-shadow:
    0 30px 70px -24px rgba(45, 212, 191, 0.30),
    0 10px 26px -14px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@keyframes frameShimmer {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50%      { background-position: 0 0, 100% 50%; }
}

/* ============================================================
   Conversation panel — chat redesign (game.js)
   ============================================================ */
/* Each message springs up into place, so the conversation feels alive. */
.msg-in { animation: msgIn .42s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.chat-bubble { position: relative; line-height: 1.35; word-break: break-word; }
/* Living chat backdrop: a soft dot grid that drifts very slowly. */
#chat-log {
  scroll-behavior: smooth;
  background-image: radial-gradient(rgba(13, 148, 136, 0.10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  animation: chatDrift 24s linear infinite;
}
.dark #chat-log { background-image: radial-gradient(rgba(94, 234, 212, 0.07) 1px, transparent 1.4px); }
@keyframes chatDrift { from { background-position: 0 0; } to { background-position: 22px 44px; } }

/* ============================================================
   Bespoke icon system (icons.js) — animated, brand-coloured line art.
   ============================================================ */
.tc-ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.18em;
  overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(13, 148, 136, 0.16));
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), filter .25s ease;
  animation: tcIcoFade .45s ease both;
}
@keyframes tcIcoFade { from { opacity: 0; } to { opacity: 1; } }

/* Lively pop + brighter glow when the user hovers the thing holding the icon. */
a:hover .tc-ico, button:hover .tc-ico, summary:hover .tc-ico,
.bouncy:hover .tc-ico, .glass:hover .tc-ico, label:hover .tc-ico {
  transform: scale(1.16) rotate(-6deg);
  filter: drop-shadow(0 6px 12px rgba(13, 148, 136, 0.42));
}

/* Idle drift — a slow, calm float so icons feel alive without being busy. */
.tc-float { animation: tcIcoFade .45s ease both, tcFloat 3.6s ease-in-out .45s infinite; }
@keyframes tcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Signature flame flicker for the streak icon. */
.tc-flame { transform-origin: 50% 80%; animation: tcIcoFade .45s ease both, tcFlame 1.6s ease-in-out infinite; }
@keyframes tcFlame {
  0%, 100% { transform: scale(1) translateY(0); }
  40%      { transform: scale(1.07, .93) translateY(.5px); }
  70%      { transform: scale(.95, 1.08) translateY(-1px); }
}

/* Soft breathing pulse (interest meter / gauge). */
.tc-pulse { animation: tcIcoFade .45s ease both, tcPulse 2.6s ease-in-out infinite; }
@keyframes tcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* A satisfying one-shot spin on hover (replay / dice / globe). */
a:hover .tc-spin, button:hover .tc-spin, .bouncy:hover .tc-spin, .glass:hover .tc-spin {
  animation: tcSpin .7s cubic-bezier(.3, .8, .3, 1) both;
}
@keyframes tcSpin { to { transform: rotate(360deg); } }

/* Mapped emojis use Microsoft Fluent "3D" art and get a gentle, lifelike
   float + tilt with a soft drop shadow, so they read as cool 3D icons rather
   than flat glyphs. Each icon's animation-delay is randomised in JS so a group
   (e.g. the category nav) shimmers out of sync instead of bobbing together. */
img.icon3d {
  filter: drop-shadow(0 5px 8px rgba(15, 23, 42, 0.28));
  animation: icon3dFloat 3.4s ease-in-out infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}
@keyframes icon3dFloat {
  0%, 100% { transform: translateY(0) rotate(-3.5deg) scale(1); }
  50%      { transform: translateY(-2.5px) rotate(3.5deg) scale(1.06); }
}
/* A satisfying pop on hover/focus of the thing holding the icon. */
a:hover img.icon3d, button:hover img.icon3d, .bouncy:hover img.icon3d {
  animation-duration: 1.1s;
  filter: drop-shadow(0 8px 12px rgba(13, 148, 136, 0.45));
}