/* ─── PROFILE / SETTINGS ─── */

/* ─── PROFILE / SETTINGS ─── */
.profile-hero {
  background: linear-gradient(160deg, #2d1200 0%, var(--accent) 50%, #7a3510 100%);
  padding: 32px 20px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 4px 20px rgba(61,26,0,.08);
}
.profile-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,.05) 0%, transparent 70%);
}

.profile-avatar-wrap{position:relative;display:inline-block;margin-bottom:12px;z-index:1;}
.profile-avatar {
  font-size:60px;width:90px;height:90px;
  background:#ffffff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:4px solid #ffffff;margin:0 auto;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.profile-name{font-family:'Fredoka One',cursive;font-size:26px;color:#ffffff;text-shadow:0 2px 10px rgba(0,0,0,.15);}
.profile-email{color:rgba(255,255,255,.75);font-size:13px;font-weight:600;margin-top:4px;}
.profile-stats{display:flex;justify-content:center;gap:32px;margin-top:20px;}
.prof-stat{text-align:center;}
.prof-stat-num{font-family:'Fredoka One',cursive;font-size:24px;color:#ffffff;}
.prof-stat-label{font-size:10px;color:rgba(255,255,255,.65);font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-top:2px;}

.settings-section {
  background:#ffffff;
  margin:12px 18px 18px;
  border-radius:20px;
  border:1.5px solid var(--border);
  overflow:hidden;
  box-shadow:0 4px 14px rgba(61,26,0,.04);
}
.settings-item {
  display:flex;align-items:center;gap:14px;
  padding:15px 18px;
  border-bottom:1.5px solid var(--border);
  cursor:pointer;
  transition:background .2s ease, padding-left .2s ease;
}
.settings-item:last-child{border-bottom:none;}
.settings-item:hover {
  background:var(--softer);
  padding-left: 22px;
}
.settings-icon {
  font-size:20px;width:38px;height:38px;
  background:var(--soft);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(61,26,0,.04);
}
.settings-text{flex:1;}
.settings-label{font-weight:800;font-size:14px;color:var(--accent);}
.settings-sub{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;}
.settings-arrow{color:var(--muted);font-size:16px;font-weight:800;transition:transform .2s ease;}
.settings-item:hover .settings-arrow {
  transform: translateX(3px);
  color: #ff7a65;
}

.avatar-picker{display:flex;gap:10px;flex-wrap:wrap;padding:12px 0;}
.av-opt {
  font-size:28px;padding:8px;
  border:1.5px solid var(--border);
  border-radius:14px;cursor:pointer;
  background:#ffffff;
  box-shadow:0 2px 6px rgba(0,0,0,.03);
  transition:all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.av-opt:hover,.av-opt.sel{
  border-color:#ff7a65;
  background:var(--softer);
  transform:scale(1.12);
  box-shadow:0 6px 14px rgba(255,122,101,.2);
}

/* ─── KITTY CARD VIEWER ─── */
.card-viewer{display:none;position:fixed;inset:0;z-index:300;max-width:480px;margin:0 auto;}
.card-viewer.open{display:block;}
#kitty-app{font-family:'Nunito',sans-serif;background:var(--cv-bg,#fdf3e7);width:100%;min-height:100vh;position:relative;overflow:hidden;}
.kstripe{position:absolute;top:0;left:0;right:0;height:10px;z-index:5;}
.kscreen{display:none;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px 24px;min-height:100vh;text-align:center;position:relative;}
.kscreen.active{display:flex;animation:fadeUp .45s ease forwards;}
.ktitle{font-family:'Fredoka One',cursive;font-size:24px;color:var(--cv-accent,#3d1a00);margin-bottom:6px;}
.ksub{font-size:14px;color:var(--cv-muted,#6b3a1f);margin-bottom:12px;line-height:1.8;max-width:310px;font-weight:600;}
.kname-big{font-family:'Fredoka One',cursive;font-size:34px;margin-bottom:4px;animation:rainbowName 4s infinite;}
.kmsign{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase;padding:5px 16px;border-radius:50px;margin-bottom:8px;}
.kqcard{border-left:5px solid;border-radius:16px;padding:12px 18px;font-size:13px;font-style:italic;font-weight:700;margin:10px 0;max-width:300px;transition:opacity .3s;}
.kdots{display:flex;gap:8px;margin-top:14px;}
.kdot{width:8px;height:8px;border-radius:50%;transition:all .3s;}
.kdot.on{transform:scale(1.3);}
.kprog{width:min(250px,78vw);height:6px;border-radius:10px;margin-top:8px;overflow:hidden;}
.kpfill{height:100%;border-radius:10px;transition:width .6s ease;}
.char-wrap{position:relative;width:170px;height:250px;margin:0 auto 8px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.char-svg{width:100%;height:100%;overflow:visible;}
.kbubble{position:absolute;background:var(--softer);border:2.5px solid;border-radius:16px;padding:7px 13px;font-size:13px;font-weight:700;white-space:nowrap;top:-50px;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:20;}
.kbubble::after{content:'';position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);border:9px solid transparent;border-bottom:0;}
.kbubble::before{content:'';position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);border:9px solid transparent;border-bottom:0;}
.kbubble.show{opacity:1;}
.kbigbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:60px;padding:14px 38px;font-size:17px;font-weight:900;font-family:'Nunito',sans-serif;cursor:pointer;outline-offset:3px;transition:all .18s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent;margin-top:12px;}
.kbigbtn:hover{transform:translateY(-3px) scale(1.05);}
.kbigbtn:active{transform:translateY(2px) scale(.97);}
.ktrow{display:flex;gap:12px;margin:10px 0;flex-wrap:wrap;justify-content:center;}
.ktbtn{font-size:26px;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .22s cubic-bezier(.34,1.56,.64,1);position:relative;-webkit-tap-highlight-color:transparent;border:3px solid;}
.ktbtn:hover{transform:scale(1.22) rotate(-12deg);}
.ktbtn.eaten{opacity:.2;pointer-events:none;transform:scale(.78);}
.kyum{position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:800;animation:floatUp .9s ease forwards;pointer-events:none;white-space:nowrap;}
.kmoodbar{display:flex;align-items:center;gap:8px;border:2px solid var(--border);border-radius:50px;padding:7px 16px;margin:8px 0;width:min(290px,86vw);}
.kmoodbar-track{flex:1;height:9px;background:rgba(0,0,0,.1);border-radius:10px;overflow:hidden;}
.kmoodbar-fill{height:100%;border-radius:10px;transition:width .9s ease;}
.kfzone{position:relative;width:min(330px,90vw);height:110px;margin:10px auto;}
#kfbtn{position:absolute;border:none;border-radius:60px;padding:14px 28px;font-size:15px;font-weight:900;font-family:'Nunito',sans-serif;cursor:pointer;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-tap-highlight-color:transparent;white-space:nowrap;transition:left .38s cubic-bezier(.34,1.56,.64,1),top .38s cubic-bezier(.34,1.56,.64,1);}
.krmsg{font-size:15px;font-weight:800;min-height:26px;}
.kfloatie{display:inline-block;margin:0 3px;animation:heartbeat 1.3s ease-in-out infinite;}
.khtrail{position:absolute;pointer-events:none;font-size:14px;animation:floatUp 1.1s ease forwards;}
.kconf{position:absolute;pointer-events:none;animation:confettiFall linear forwards;}
.kbgf{position:absolute;pointer-events:none;font-size:13px;opacity:.08;animation:bgRise linear infinite;}
.kspin{font-size:44px;animation:spin 5s linear infinite;display:inline-block;}
.kback-btn{position:absolute;top:18px;left:18px;background:rgba(0,0,0,.08);border:none;border-radius:50%;width:38px;height:38px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-tap-highlight-color:transparent;}

/* ─── MODALS ─── */
.modal-overlay {
  position:fixed;inset:0;
  background:rgba(20, 8, 3, 0.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:500;
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .2s ease;
}
.modal-overlay.top{align-items:center;}

.modal-sheet {
  background:#ffffff;
  border-radius:24px 24px 0 0;
  width:100%;
  max-width:480px;
  max-height:85vh;
  overflow-y:auto;
  animation:slideUp .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding:24px 22px 36px;
  box-shadow:0 -10px 40px rgba(61,26,0,.15);
  border:1.5px solid var(--border);
  border-bottom:none;
}
.modal-sheet.centered {
  border-radius:24px;
  margin:16px;
  border-bottom:1.5px solid var(--border);
}
.modal-handle {
  width:36px;height:4px;
  background:var(--border);
  border-radius:2px;
  margin:0 auto 20px;
}
.modal-title {
  font-family:'Fredoka One',cursive;
  font-size:22px;
  color:var(--accent);
  margin-bottom:16px;
  text-align:center;
}

/* ─── MISC UTIL ─── */
.pill-tag{display:inline-flex;align-items:center;gap:4px;background:var(--soft);border:1.5px solid var(--border);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:800;color:var(--muted);}
.spacer{flex:1;}

/* ══════════════════════════════════════════════
   CSS CHARACTER SYSTEM — CARD VIEWER ONLY
   Inspired by: hoodie penguin & begging cat refs
══════════════════════════════════════════════ */

/* ── SHARED KEYFRAMES ── */
@keyframes ch-idle{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-8px) scaleX(1.02)}}
@keyframes ch-blink{0%,92%,100%{transform:scaleY(1)}94%,98%{transform:scaleY(0.06)}}
@keyframes ch-tail{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes ch-ear-twitch{0%,80%,100%{transform:rotate(0)}82%,88%{transform:rotate(-12deg)}85%{transform:rotate(8deg)}}
@keyframes ch-happy-bounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-14px) scale(1.04)}60%{transform:translateY(-6px) scale(1.02)}}
@keyframes ch-sad-droop{0%,100%{transform:translateY(0)}50%{transform:translateY(4px) rotate(-1deg)}}
@keyframes ch-excited{0%,100%{transform:translateY(0) rotate(0) scale(1)}20%{transform:translateY(-18px) rotate(-6deg) scale(1.05)}40%{transform:translateY(-8px) rotate(4deg) scale(1.03)}60%{transform:translateY(-14px) rotate(-4deg) scale(1.05)}80%{transform:translateY(-4px) rotate(2deg) scale(1.02)}}
@keyframes ch-wiggle-body{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes ch-thinking{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-6deg) translateY(-3px)}}
@keyframes ch-surprised{0%{transform:scale(1)}10%{transform:scale(1.18) translateY(-8px)}25%{transform:scale(1.05) translateY(-4px)}100%{transform:scale(1) translateY(0)}}
@keyframes ch-paw-wave{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-30deg)}70%{transform:rotate(10deg)}}
@keyframes ch-arm-beg{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-7px) rotate(5deg)}}
@keyframes ch-blush-pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes ch-hoodie-sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(1.5deg)}}
@keyframes ch-sparkle{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(180deg)}}

/* ── WRAPPER ── */
.css-char{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  height:100%;
  cursor:pointer;
  user-select:none;
}
.css-char .char-root{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ─── EMOTION STATES ─── */
.css-char.idle .char-root{animation:ch-idle 2.4s ease-in-out infinite;}
.css-char.happy .char-root{animation:ch-happy-bounce .7s ease-in-out infinite;}
.css-char.sad .char-root{animation:ch-sad-droop 2s ease-in-out infinite;}
.css-char.excited .char-root{animation:ch-excited .55s ease-in-out infinite;}
.css-char.thinking .char-root{animation:ch-thinking 2s ease-in-out infinite;}
.css-char.surprised .char-root{animation:ch-surprised .5s ease forwards;}
.css-char.wiggle .char-root{animation:ch-wiggle-body .45s ease-in-out;}

/* ─── SPARKLES (shared) ─── */
.sparkle{position:absolute;pointer-events:none;}
.sparkle::before,.sparkle::after{content:'✦';position:absolute;font-size:10px;animation:ch-sparkle 1.2s ease-in-out infinite;}
.sparkle::before{top:-22px;left:-8px;animation-delay:0s;color:#f4c00a;}
.sparkle::after{top:-18px;right:-6px;animation-delay:.4s;color:#f87171;}

/* ══════════════════════
   🐱 CAT CHARACTER
══════════════════════ */
.css-char.char-cat .ch-body-wrap{position:relative;width:110px;}
/* Head */
.css-char.char-cat .ch-head{
  width:96px;height:88px;
  background:#fff;
  border-radius:50% 50% 48% 48%;
  border:3px solid #333;
  position:relative;
  margin:0 auto;
  z-index:2;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.06);
}
/* Ears */
.css-char.char-cat .ch-ear-left,
.css-char.char-cat .ch-ear-right{
  position:absolute;
  top:-20px;
  width:26px;height:28px;
  background:#fff;
  border:3px solid #333;
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
}
.css-char.char-cat .ch-ear-left{left:8px;transform-origin:bottom center;animation:ch-ear-twitch 4s ease-in-out infinite;}
.css-char.char-cat .ch-ear-right{right:8px;transform-origin:bottom center;animation:ch-ear-twitch 4s ease-in-out infinite .5s;}
.css-char.char-cat .ch-ear-inner-l,
.css-char.char-cat .ch-ear-inner-r{
  position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:12px;height:16px;
  background:#ffb7c5;
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
}
/* Stripes on head */
.css-char.char-cat .ch-stripes{position:absolute;top:6px;left:50%;transform:translateX(-50%);display:flex;gap:3px;}
.css-char.char-cat .ch-stripe{width:3px;height:12px;background:#bbb;border-radius:2px;}
/* Eyes */
.css-char.char-cat .ch-eyes{
  position:absolute;
  top:30px;left:0;right:0;
  display:flex;justify-content:center;gap:16px;
}
.css-char.char-cat .ch-eye{
  width:12px;height:14px;
  background:#333;
  border-radius:50%;
  transform-origin:center;
  animation:ch-blink 3.5s ease-in-out infinite;
  position:relative;
}
.css-char.char-cat .ch-eye::after{content:'';position:absolute;top:2px;left:3px;width:4px;height:4px;background:#fff;border-radius:50%;}
/* Blush */
.css-char.char-cat .ch-blush-l,
.css-char.char-cat .ch-blush-r{
  position:absolute;top:46px;
  width:18px;height:10px;
  background:#ffb7c5;
  border-radius:50%;
  opacity:.7;
  animation:ch-blush-pulse 2s ease-in-out infinite;
}
.css-char.char-cat .ch-blush-l{left:10px;}
.css-char.char-cat .ch-blush-r{right:10px;}
/* Nose & mouth */
.css-char.char-cat .ch-nose{position:absolute;top:50px;left:50%;transform:translateX(-50%);width:7px;height:5px;background:#ffb7c5;border-radius:50%;border:1.5px solid #e8a0b4;}
.css-char.char-cat .ch-mouth{position:absolute;top:57px;left:50%;transform:translateX(-50%);width:20px;height:8px;border:2.5px solid #555;border-top:none;border-radius:0 0 12px 12px;}
/* Whiskers */
.css-char.char-cat .ch-whiskers{position:absolute;top:52px;left:0;right:0;}
.css-char.char-cat .ch-wh-l1,.css-char.char-cat .ch-wh-l2,.css-char.char-cat .ch-wh-r1,.css-char.char-cat .ch-wh-r2{position:absolute;height:1.5px;background:#ccc;border-radius:1px;}
.css-char.char-cat .ch-wh-l1{width:22px;top:0;left:2px;transform:rotate(-5deg);}
.css-char.char-cat .ch-wh-l2{width:22px;top:6px;left:2px;transform:rotate(5deg);}
.css-char.char-cat .ch-wh-r1{width:22px;top:0;right:2px;transform:rotate(5deg);}
.css-char.char-cat .ch-wh-r2{width:22px;top:6px;right:2px;transform:rotate(-5deg);}
/* Body */
.css-char.char-cat .ch-body{
  width:80px;height:72px;
  background:#fff;
  border-radius:40px 40px 36px 36px;
  border:3px solid #333;
  position:relative;
  margin:-10px auto 0;
  z-index:1;
}
/* Arms/Paws */
.css-char.char-cat .ch-arm-left{
  position:absolute;left:-20px;top:8px;
  width:26px;height:38px;
  background:#fff;border:3px solid #333;
  border-radius:14px 4px 14px 14px;
  transform-origin:top right;
  animation:ch-arm-beg 1.8s ease-in-out infinite;
}
.css-char.char-cat .ch-arm-right{
  position:absolute;right:-20px;top:8px;
  width:26px;height:38px;
  background:#fff;border:3px solid #333;
  border-radius:4px 14px 14px 14px;
  transform-origin:top left;
  animation:ch-arm-beg 1.8s ease-in-out infinite .3s;
}
/* Paw toes */
.css-char.char-cat .ch-paw-l,.css-char.char-cat .ch-paw-r{
  position:absolute;bottom:-6px;
  display:flex;gap:3px;
}
.css-char.char-cat .ch-paw-l{left:2px;}
.css-char.char-cat .ch-paw-r{right:2px;}
.css-char.char-cat .ch-toe{width:7px;height:7px;background:#fff;border:2px solid #333;border-radius:50%;}
/* Tail */
.css-char.char-cat .ch-tail{
  position:absolute;right:-28px;bottom:10px;
  width:24px;height:50px;
  border-right:3px solid #333;border-bottom:3px solid #333;
  border-radius:0 0 16px 0;
  transform-origin:top center;
  animation:ch-tail 2s ease-in-out infinite;
}
/* Belly patch */
.css-char.char-cat .ch-belly{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:38px;height:36px;
  background:#f9f9f9;
  border-radius:50%;
  border:1.5px solid #eee;
}
/* Happy state: curved eyes */
.css-char.char-cat.happy .ch-eye{
  width:14px;height:8px;
  background:none;
  border:2.5px solid #333;
  border-top:none;
  border-radius:0 0 10px 10px;
}
.css-char.char-cat.happy .ch-eye::after{display:none;}
.css-char.char-cat.happy .ch-mouth{border-radius:0 0 16px 16px;width:26px;}
/* Sad: eyes drooped */
.css-char.char-cat.sad .ch-eye{transform:rotate(0);animation:none;}
.css-char.char-cat.sad .ch-eye::before{content:'';position:absolute;top:-5px;left:1px;width:10px;height:6px;background:#fff;border-bottom:2.5px solid #333;transform:rotate(8deg);}
.css-char.char-cat.sad .ch-mouth{border-radius:16px 16px 0 0;top:56px;border-top:2.5px solid #555;border-bottom:none;}
/* Surprised: big eyes */
.css-char.char-cat.surprised .ch-eye{width:16px;height:18px;animation:none;}
.css-char.char-cat.surprised .ch-mouth{width:14px;height:14px;border-radius:50%;border:2.5px solid #333;border-top:2.5px solid #333;top:57px;}
/* Thinking */
.css-char.char-cat.thinking .ch-eye:last-child{transform:translateY(-3px) scaleY(.7);}

/* ══════════════════════
   🐼 PANDA CHARACTER
══════════════════════ */
.css-char.char-panda .ch-body-wrap{position:relative;width:110px;}
.css-char.char-panda .ch-head{
  width:100px;height:94px;
  background:#fff;
  border-radius:50%;
  border:3px solid #222;
  position:relative;
  margin:0 auto;
  z-index:2;
}
/* Ears */
.css-char.char-panda .ch-ear-left,
.css-char.char-panda .ch-ear-right{
  position:absolute;top:-18px;
  width:30px;height:30px;
  background:#222;
  border-radius:50%;
  border:3px solid #111;
}
.css-char.char-panda .ch-ear-left{left:6px;}
.css-char.char-panda .ch-ear-right{right:6px;}
/* Eye patches */
.css-char.char-panda .ch-patch-l,.css-char.char-panda .ch-patch-r{
  position:absolute;top:28px;
  width:28px;height:26px;
  background:#222;
  border-radius:50% 50% 40% 40%;
}
.css-char.char-panda .ch-patch-l{left:10px;transform:rotate(-8deg);}
.css-char.char-panda .ch-patch-r{right:10px;transform:rotate(8deg);}
/* Eyes */
.css-char.char-panda .ch-eyes{
  position:absolute;top:34px;left:0;right:0;
  display:flex;justify-content:center;gap:18px;
}
.css-char.char-panda .ch-eye{
  width:12px;height:14px;background:#fff;
  border-radius:50%;
  transform-origin:center;
  animation:ch-blink 3.8s ease-in-out infinite;
  position:relative;
}
.css-char.char-panda .ch-eye::after{content:'';position:absolute;top:2px;left:2px;width:5px;height:5px;background:#111;border-radius:50%;}
/* Nose */
.css-char.char-panda .ch-nose{position:absolute;top:56px;left:50%;transform:translateX(-50%);width:10px;height:7px;background:#333;border-radius:50%;}
/* Mouth */
.css-char.char-panda .ch-mouth{position:absolute;top:65px;left:50%;transform:translateX(-50%);width:22px;height:9px;border:2.5px solid #333;border-top:none;border-radius:0 0 14px 14px;}
/* Blush */
.css-char.char-panda .ch-blush-l,.css-char.char-panda .ch-blush-r{position:absolute;top:58px;width:16px;height:9px;background:#ffb7c5;border-radius:50%;opacity:.65;animation:ch-blush-pulse 2.2s ease-in-out infinite;}
.css-char.char-panda .ch-blush-l{left:14px;}
.css-char.char-panda .ch-blush-r{right:14px;}
/* Body */
.css-char.char-panda .ch-body{
  width:86px;height:78px;
  background:#fff;
  border-radius:44px 44px 38px 38px;
  border:3px solid #222;
  position:relative;
  margin:-12px auto 0;
  z-index:1;
}
/* Arms */
.css-char.char-panda .ch-arm-left{
  position:absolute;left:-22px;top:6px;
  width:28px;height:42px;
  background:#222;border:3px solid #111;
  border-radius:16px 4px 16px 16px;
  transform-origin:top right;
  animation:ch-arm-beg 2s ease-in-out infinite;
}
.css-char.char-panda .ch-arm-right{
  position:absolute;right:-22px;top:6px;
  width:28px;height:42px;
  background:#222;border:3px solid #111;
  border-radius:4px 16px 16px 16px;
  transform-origin:top left;
  animation:ch-arm-beg 2s ease-in-out infinite .4s;
}
/* Belly */
.css-char.char-panda .ch-belly{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:44px;height:42px;background:#f0f0f0;border-radius:50%;border:1.5px solid #e0e0e0;
}
/* Leg spots */
.css-char.char-panda .ch-leg-l,.css-char.char-panda .ch-leg-r{position:absolute;bottom:-4px;width:30px;height:20px;background:#222;border-radius:12px;border:2.5px solid #111;}
.css-char.char-panda .ch-leg-l{left:8px;}
.css-char.char-panda .ch-leg-r{right:8px;}
/* Happy panda */
.css-char.char-panda.happy .ch-eye{width:14px;height:8px;background:none;border:2.5px solid #fff;border-top:none;border-radius:0 0 10px 10px;animation:none;}
.css-char.char-panda.happy .ch-eye::after{display:none;}
.css-char.char-panda.happy .ch-mouth{width:28px;border-radius:0 0 18px 18px;}
/* Sad */
.css-char.char-panda.sad .ch-mouth{border-radius:14px 14px 0 0;border-top:2.5px solid #333;border-bottom:none;top:63px;}
/* Surprised */
.css-char.char-panda.surprised .ch-eye{width:15px;height:17px;animation:none;}
.css-char.char-panda.surprised .ch-mouth{width:16px;height:16px;border-radius:50%;border:2.5px solid #333;border-top:2.5px solid #333;}

/* ══════════════════════
   🐻 BEAR CHARACTER
══════════════════════ */
.css-char.char-bear .ch-body-wrap{position:relative;width:110px;}
.css-char.char-bear .ch-head{
  width:98px;height:90px;
  background:#c8965c;
  border-radius:50%;
  border:3px solid #7a4f24;
  position:relative;
  margin:0 auto;
  z-index:2;
  box-shadow:inset -6px -6px 0 rgba(0,0,0,.08);
}
/* Ears */
.css-char.char-bear .ch-ear-left,.css-char.char-bear .ch-ear-right{
  position:absolute;top:-16px;
  width:30px;height:30px;
  background:#c8965c;
  border-radius:50%;
  border:3px solid #7a4f24;
}
.css-char.char-bear .ch-ear-left{left:8px;}
.css-char.char-bear .ch-ear-right{right:8px;}
.css-char.char-bear .ch-ear-inner-l,.css-char.char-bear .ch-ear-inner-r{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;background:#e8b48a;border-radius:50%;
}
/* Eyes */
.css-char.char-bear .ch-eyes{position:absolute;top:30px;left:0;right:0;display:flex;justify-content:center;gap:18px;}
.css-char.char-bear .ch-eye{
  width:13px;height:15px;background:#3a1f08;border-radius:50%;
  position:relative;animation:ch-blink 4s ease-in-out infinite;
}
.css-char.char-bear .ch-eye::after{content:'';position:absolute;top:2px;left:3px;width:5px;height:5px;background:#fff;border-radius:50%;}
/* Snout */
.css-char.char-bear .ch-snout{
  position:absolute;top:46px;left:50%;transform:translateX(-50%);
  width:38px;height:28px;
  background:#e8b48a;border-radius:50%;
  border:2px solid #b87a40;
}
/* Nose */
.css-char.char-bear .ch-nose{position:absolute;top:50px;left:50%;transform:translateX(-50%);width:10px;height:7px;background:#3a1f08;border-radius:50%;}
/* Mouth */
.css-char.char-bear .ch-mouth{position:absolute;top:61px;left:50%;transform:translateX(-50%);width:20px;height:9px;border:2.5px solid #5a3010;border-top:none;border-radius:0 0 12px 12px;}
/* Blush */
.css-char.char-bear .ch-blush-l,.css-char.char-bear .ch-blush-r{position:absolute;top:50px;width:16px;height:10px;background:#e8745a;border-radius:50%;opacity:.5;animation:ch-blush-pulse 2s ease-in-out infinite;}
.css-char.char-bear .ch-blush-l{left:10px;}
.css-char.char-bear .ch-blush-r{right:10px;}
/* Body */
.css-char.char-bear .ch-body{
  width:88px;height:76px;
  background:#c8965c;
  border-radius:44px 44px 36px 36px;
  border:3px solid #7a4f24;
  position:relative;
  margin:-12px auto 0;
  z-index:1;
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.07);
}
/* Arms */
.css-char.char-bear .ch-arm-left{
  position:absolute;left:-22px;top:8px;
  width:28px;height:44px;
  background:#c8965c;border:3px solid #7a4f24;
  border-radius:16px 4px 16px 16px;
  transform-origin:top right;
  animation:ch-paw-wave 2.2s ease-in-out infinite;
}
.css-char.char-bear .ch-arm-right{
  position:absolute;right:-22px;top:8px;
  width:28px;height:44px;
  background:#c8965c;border:3px solid #7a4f24;
  border-radius:4px 16px 16px 16px;
  transform-origin:top left;
  animation:ch-paw-wave 2.2s ease-in-out infinite .35s;
}
/* Paws */
.css-char.char-bear .ch-paw-l,.css-char.char-bear .ch-paw-r{position:absolute;bottom:-8px;width:24px;height:16px;background:#e8b48a;border-radius:50%;border:2px solid #7a4f24;}
.css-char.char-bear .ch-paw-l{left:-2px;}
.css-char.char-bear .ch-paw-r{right:-2px;}
/* Belly */
.css-char.char-bear .ch-belly{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:46px;height:44px;background:#e8b48a;border-radius:50%;border:1.5px solid #d4a070;}
/* Legs */
.css-char.char-bear .ch-leg-l,.css-char.char-bear .ch-leg-r{position:absolute;bottom:-6px;width:28px;height:20px;background:#c8965c;border-radius:12px;border:2.5px solid #7a4f24;}
.css-char.char-bear .ch-leg-l{left:10px;}
.css-char.char-bear .ch-leg-r{right:10px;}
/* Happy */
.css-char.char-bear.happy .ch-eye{width:14px;height:8px;background:none;border:2.5px solid #3a1f08;border-top:none;border-radius:0 0 10px 10px;animation:none;}
.css-char.char-bear.happy .ch-eye::after{display:none;}
/* Sad */
.css-char.char-bear.sad .ch-mouth{border-radius:12px 12px 0 0;border-top:2.5px solid #5a3010;border-bottom:none;top:59px;}

/* ══════════════════════
   🐧 PENGUIN (Hoodie style)
══════════════════════ */
.css-char.char-penguin .ch-body-wrap{position:relative;width:110px;}
/* Hoodie body — main chonky shape */
.css-char.char-penguin .ch-hoodie{
  width:100px;height:100px;
  background:#b0b0b0;
  border-radius:46px 46px 40px 40px;
  border:3px solid #333;
  position:relative;
  margin:-14px auto 0;
  z-index:1;
  animation:ch-hoodie-sway 3s ease-in-out infinite;
}
/* Hoodie pocket string */
.css-char.char-penguin .ch-string-l,.css-char.char-penguin .ch-string-r{
  position:absolute;top:28px;
  width:4px;height:28px;
  background:#222;
  border-radius:2px;
}
.css-char.char-penguin .ch-string-l{left:44px;}
.css-char.char-penguin .ch-string-r{right:44px;}
.css-char.char-penguin .ch-string-dot-l,.css-char.char-penguin .ch-string-dot-r{
  position:absolute;
  width:7px;height:7px;background:#222;border-radius:50%;
}
.css-char.char-penguin .ch-string-dot-l{top:56px;left:42px;}
.css-char.char-penguin .ch-string-dot-r{top:56px;right:42px;}
/* Hoodie hood/opening circle */
.css-char.char-penguin .ch-hood{
  position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:80px;height:76px;
  background:#999;
  border-radius:50%;
  border:3px solid #333;
  z-index:2;
  overflow:hidden;
}
/* Inner hood */
.css-char.char-penguin .ch-hood-inner{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:60px;height:64px;
  background:#444;
  border-radius:50%;
  z-index:3;
}
/* Head (white face) */
.css-char.char-penguin .ch-head{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:52px;height:56px;
  background:#fff;
  border-radius:50%;
  border:none;
  z-index:4;
}
/* Eyes */
.css-char.char-penguin .ch-eyes{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  display:flex;justify-content:center;gap:10px;
  z-index:5;width:52px;
}
.css-char.char-penguin .ch-eye{
  width:9px;height:10px;
  background:#222;border-radius:50%;
  position:relative;
  animation:ch-blink 3.2s ease-in-out infinite;
}
.css-char.char-penguin .ch-eye::after{content:'';position:absolute;top:1px;left:2px;width:3px;height:3px;background:#fff;border-radius:50%;}
/* Beak */
.css-char.char-penguin .ch-beak{
  position:absolute;top:28px;left:50%;transform:translateX(-50%);
  width:14px;height:8px;
  background:#f4a522;
  border-radius:4px 4px 6px 6px;
  border:1.5px solid #c47a0a;
  z-index:5;
}
/* Blush */
.css-char.char-penguin .ch-blush-l,.css-char.char-penguin .ch-blush-r{
  position:absolute;top:25px;
  width:10px;height:6px;
  background:#ffb7c5;border-radius:50%;opacity:.8;
  z-index:5;animation:ch-blush-pulse 2s ease-in-out infinite;
}
.css-char.char-penguin .ch-blush-l{left:4px;}
.css-char.char-penguin .ch-blush-r{right:4px;}
/* Flippers (inside hoodie sleeves) */
.css-char.char-penguin .ch-arm-left{
  position:absolute;left:-14px;top:22px;
  width:26px;height:38px;
  background:#b0b0b0;border:3px solid #333;
  border-radius:14px 4px 12px 12px;
  transform-origin:top right;
  animation:ch-arm-beg 2s ease-in-out infinite;
}
.css-char.char-penguin .ch-arm-right{
  position:absolute;right:-14px;top:22px;
  width:26px;height:38px;
  background:#b0b0b0;border:3px solid #333;
  border-radius:4px 14px 12px 12px;
  transform-origin:top left;
  animation:ch-arm-beg 2s ease-in-out infinite .3s;
}
/* Feet */
.css-char.char-penguin .ch-foot-l,.css-char.char-penguin .ch-foot-r{
  position:absolute;bottom:-10px;
  width:32px;height:14px;
  background:#f4a522;border-radius:8px 8px 12px 12px;
  border:2px solid #c47a0a;
}
.css-char.char-penguin .ch-foot-l{left:8px;transform:rotate(-6deg);}
.css-char.char-penguin .ch-foot-r{right:8px;transform:rotate(6deg);}
/* White belly on hoodie */
.css-char.char-penguin .ch-belly{position:absolute;top:28px;left:50%;transform:translateX(-50%);width:46px;height:44px;background:#ddd;border-radius:50%;border:1.5px solid #bbb;}
/* Happy penguin */
.css-char.char-penguin.happy .ch-eye{width:10px;height:6px;background:none;border:2px solid #222;border-top:none;border-radius:0 0 8px 8px;animation:none;}
.css-char.char-penguin.happy .ch-eye::after{display:none;}
.css-char.char-penguin.happy .ch-beak{transform:translateX(-50%) rotate(-5deg);}
/* Sad */
.css-char.char-penguin.sad .ch-eye{border:none;width:10px;height:10px;background:none;}
.css-char.char-penguin.sad .ch-eye::before{content:'😢';font-size:9px;position:absolute;top:-1px;left:-1px;}
.css-char.char-penguin.sad .ch-eye::after{display:none;}
/* Surprised */
.css-char.char-penguin.surprised .ch-eye{width:12px;height:13px;animation:none;}
.css-char.char-penguin.surprised .ch-beak{width:10px;height:10px;border-radius:50%;}

/* ── EMOTION-DRIVEN MOUTH HELPERS ── */
.css-char.thinking .ch-mouth{border-radius:0 0 12px 12px;width:14px;transform:translateX(calc(-50% + 5px));}
.css-char.excited .ch-mouth{width:30px;border-radius:0 0 20px 20px;border-width:3px;}