/* Lumo CSS mascot placeholder — based on docs/reference/lumo-character-reference.jpg */
.mini-mascot {
  width: 46px;
  height: 40px;
  position: relative;
  border-radius: 18px;
  background: radial-gradient(circle at 28% 20%, #fff 0 18%, #f8f8ff 42%, #d8ccff 100%);
  box-shadow: inset 0 -6px 10px rgba(112,94,190,.14), 0 5px 12px rgba(120,100,180,.12);
}
.mini-mascot::before {
  content: '';
  position: absolute;
  left: 19px;
  top: -10px;
  width: 8px;
  height: 20px;
  border-radius: 10px 10px 4px 10px;
  background: linear-gradient(#f2eaff, #a9cfff);
  transform: rotate(-28deg);
  box-shadow: 9px 2px 0 #b8c7ff;
}
.mini-mascot::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 21px;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  background: #252338;
  box-shadow: 13px 0 #252338, 6px 8px 0 -1px rgba(170,140,220,.35);
}
.tiny-face { width: 32px; height: 34px; border-radius: 15px; position: relative; background: linear-gradient(#fff, #e6e0ff); }
.tiny-face::before { content: ''; position: absolute; left: 8px; top: 16px; width: 4px; height: 4px; border-radius: 50%; background: #252338; box-shadow: 13px 0 #252338; }
.tiny-face::after { content: ''; position: absolute; left: 13px; top: 22px; width: 8px; height: 3px; border-bottom: 2px solid #252338; border-radius: 0 0 8px 8px; }

.buddy {
  --accent: #cfc4ff;
  --suit: #d8ccff;
  --body-hi: #f8f8ff;
  position: absolute;
  width: 155px;
  height: 218px;
  filter: drop-shadow(0 22px 22px rgba(68,61,124,.16));
}
.buddy .head {
  position: absolute;
  left: 4px;
  top: 27px;
  width: 147px;
  height: 98px;
  border-radius: 42px;
  background:
    radial-gradient(circle at 26% 16%, rgba(255,255,255,.95) 0 18%, transparent 40%),
    radial-gradient(circle at 78% 30%, rgba(158,220,255,.22) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 45%, rgba(158,220,255,.18) 0 4px, transparent 5px),
    radial-gradient(circle at 74% 51%, rgba(158,220,255,.24) 0 5px, transparent 6px),
    linear-gradient(180deg, #fff 0%, #f8f8ff 48%, #ebe7ff 100%);
  box-shadow: inset 0 -14px 26px rgba(128,105,202,.12), inset 10px 14px 22px rgba(255,255,255,.72);
  z-index: 4;
}
.buddy .head::before {
  content: '';
  position: absolute;
  left: 62px;
  top: -31px;
  width: 19px;
  height: 43px;
  border-radius: 18px 18px 7px 18px;
  background: linear-gradient(#f4eaff, #b9a6ff 50%, #9edcff);
  transform: rotate(-30deg);
  transform-origin: bottom center;
  box-shadow: 20px 3px 0 #a8c8ff;
  z-index: 7;
}
.buddy .head::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 59px;
  width: 24px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(194,151,232,.45), rgba(194,151,232,0) 70%);
  box-shadow: 79px 0 0 rgba(194,151,232,.24);
}
.buddy .head i {
  position: absolute;
  top: 49px;
  width: 12px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #fff 0 2px, #252338 3px 100%);
  box-shadow: 0 3px 6px rgba(20,18,42,.2);
}
.buddy .dot-1 { left: 38px; }
.buddy .dot-2 { right: 38px; }
.buddy .head b {
  position: absolute;
  left: 63px;
  top: 68px;
  width: 25px;
  height: 12px;
  border-bottom: 4px solid #252338;
  border-radius: 0 0 25px 25px;
}
.buddy .head.wink .dot-2 { height: 5px; border-radius: 99px; top: 55px; transform: rotate(-18deg); box-shadow: none; }
.buddy .head.wink b { width: 28px; height: 18px; left: 61px; top: 63px; border: 0; background: #252338; border-radius: 0 0 18px 18px; }
.buddy .head.wink b::after { content: ''; position: absolute; left: 7px; bottom: 2px; width: 14px; height: 7px; background: #ff9fc7; border-radius: 12px 12px 4px 4px; }
.buddy .sprout { display: none; }
.buddy .body {
  position: absolute;
  left: 37px;
  top: 111px;
  width: 82px;
  height: 84px;
  border-radius: 38px 38px 30px 30px / 46px 46px 28px 28px;
  background:
    radial-gradient(circle at 36% 54%, rgba(255,255,255,.55) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 42%, rgba(255,255,255,.45) 0 3px, transparent 4px),
    linear-gradient(180deg, var(--body-hi) 0%, #f5f3ff 38%, var(--suit) 100%);
  z-index: 3;
  box-shadow: inset 0 -16px 24px rgba(92,79,172,.14), inset 0 12px 20px rgba(255,255,255,.65);
}
.buddy .body em {
  position: absolute;
  left: 32px;
  top: 29px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,.58);
  border-radius: 50%;
  box-shadow: 18px 13px 0 -2px rgba(255,255,255,.48), -13px 18px 0 -3px rgba(255,255,255,.42);
}
.buddy .arm {
  position: absolute;
  top: 124px;
  width: 27px;
  height: 68px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #f4f1ff 45%, var(--suit) 100%);
  z-index: 2;
  box-shadow: inset 0 -10px 16px rgba(105,88,190,.12);
}
.buddy .arm.left { left: 18px; transform: rotate(10deg); }
.buddy .arm.right { right: 18px; transform: rotate(-10deg); }
.buddy .leg {
  position: absolute;
  bottom: 0;
  width: 29px;
  height: 37px;
  border-radius: 16px 16px 12px 12px;
  background: linear-gradient(#f7f5ff, var(--suit));
  z-index: 1;
  box-shadow: inset 0 -8px 12px rgba(105,88,190,.12);
}
.buddy .leg.left { left: 48px; }
.buddy .leg.right { right: 48px; }
.buddy-lavender { --accent: #cfc4ff; --suit: #cfc4ff; position: relative; transform: scale(1.05); }
.editor-buddy { position: relative; left: auto; top: auto; }
.buddy-teal { --accent: #9edcff; --suit: #aee3cf; left: 70px; bottom: 0; transform: scale(1.07); }
.buddy-pink { --accent: #ff9fc7; --suit: #f8c2d6; left: 350px; bottom: 2px; transform: scale(1.28); z-index: 3; }
.buddy-blue { --accent: #9edcff; --suit: #bcd6f7; right: 58px; bottom: 0; transform: scale(1.06); }

.wearing-beanie .head::before { background: linear-gradient(#ecfff9, #8ff0d2); box-shadow: 20px 3px 0 #72dec3; }
.wearing-cap .head::before { background: linear-gradient(#ffe1ee, #ff9fc7); box-shadow: 20px 3px 0 #f29abb; }
.wearing-cap::after { content: ''; position: absolute; left: 99px; top: 48px; width: 54px; height: 28px; border-radius: 4px 24px 24px 4px; background: #eb6c91; z-index: 5; transform: rotate(-8deg); }
.wearing-dino .head::before { background: linear-gradient(#eaf7ff, #9edcff); box-shadow: 20px 3px 0 #86c8ff; }
.wearing-dino::before { content: ''; position: absolute; right: 2px; top: 50px; width: 28px; height: 120px; border-radius: 15px; background: linear-gradient(#7c5bd6, #8ecbff); z-index: 0; transform: rotate(-18deg); }
.wearing-headset::before { content: ''; position: absolute; left: 3px; top: 50px; width: 149px; height: 92px; border-radius: 50%; border: 8px solid #b7a9f3; border-bottom-color: transparent; z-index: 6; }
.wearing-headset::after { content: ''; position: absolute; left: 3px; top: 86px; width: 26px; height: 54px; border-radius: 14px; background: #b7a9f3; z-index: 7; box-shadow: 123px 0 #b7a9f3; }
.wearing-hoodie .body { background: linear-gradient(#fff, #f5f3ff 40%, var(--suit)); }
.wearing-bag .body::after { content: ''; position: absolute; right: -3px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(#d8ccff, #b9a6ff); box-shadow: inset 0 -6px 10px rgba(0,0,0,.08); }
.wearing-crossbag .body::before { content: ''; position: absolute; left: 4px; top: 8px; width: 90px; height: 8px; border-radius: 99px; background: #ffd85f; transform: rotate(-28deg); }
.wearing-crossbag .body::after { content: ''; position: absolute; left: 53px; top: 45px; width: 30px; height: 26px; border-radius: 8px; background: #d6a858; }
.hold-bomb::after { content: '★'; position: absolute; left: -22px; top: 28px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #566273, #182035); color: #ffd85f; font-size: 24px; box-shadow: 0 9px 14px rgba(0,0,0,.14); }
.hold-ball::after { content: '★'; position: absolute; right: -46px; top: 16px; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #fff, #f6b6f3 38%, #c89bff); color: #ffe35d; font-size: 28px; box-shadow: 0 12px 18px rgba(126,94,188,.22); }
.hold-rocket::after { content: '✦'; position: absolute; right: -38px; top: 26px; width: 42px; height: 92px; border-radius: 22px 22px 12px 12px; background: linear-gradient(#f6fbff, #8e9bb0); border: 5px solid #586073; color: #8d88e8; display: grid; place-items: center; transform: rotate(35deg); box-shadow: 0 12px 18px rgba(64,72,112,.18); }