.silly-filters-card{
  background:linear-gradient(145deg,#ffd9f4,#9ee8ff)!important;
  border:3px solid #a53691!important;
}
.silly-filters-game{
  max-width:980px;
  margin:34px auto 55px;
  padding:clamp(20px,5vw,46px);
  border-radius:34px;
  background:radial-gradient(circle at 90% 8%,#fff08a 0 6%,transparent 20%),linear-gradient(145deg,#fff0fb,#e9faff);
  box-shadow:0 18px 55px #17213d20;
  text-align:center;
  scroll-margin-top:18px;
}
.silly-filters-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.silly-filters-top strong{color:#7b2874}
.silly-filters-game h2{font-size:clamp(34px,6vw,58px);margin:10px 0}
.silly-filters-privacy{
  max-width:720px;
  margin:0 auto 22px;
  padding:14px 18px;
  border-radius:18px;
  background:#fff;
  color:#37445f;
  font-weight:800;
  line-height:1.45;
}
.silly-filters-permission,.silly-filters-error{
  display:grid;
  gap:10px;
  justify-items:center;
  max-width:700px;
  margin:24px auto;
  padding:28px;
  border:4px solid #a53691;
  border-radius:28px;
  background:#fff;
}
.silly-filters-permission[hidden],.silly-filters-error[hidden],.silly-filters-camera[hidden]{display:none}
.silly-filters-permission>span{font-size:64px}
.silly-filters-permission>strong,.silly-filters-error>strong{font-size:23px}
.silly-filters-permission small{font-size:16px;color:#53617a}
.silly-filters-game button:not(.back){
  min-height:56px;
  border:0;
  border-radius:18px;
  padding:12px 18px;
  background:#8d2d84;
  color:#fff;
  box-shadow:0 6px 0 #5d1b58;
  font:inherit;
  font-weight:950;
  cursor:pointer;
}
.silly-filters-camera{
  max-width:780px;
  margin:20px auto;
  padding:12px;
  border-radius:28px;
  background:#17213d;
  box-shadow:0 12px 30px #17213d35;
}
.silly-filter-preview-shell{position:relative}
.silly-filters-stage{position:relative;overflow:hidden;border-radius:20px;touch-action:none}
.silly-filters-stage video{
  display:block;
  width:100%;
  max-height:70vh;
  border-radius:20px;
  background:#080b13;
  object-fit:cover;
  transform:scaleX(-1);
}
.silly-filters-camera[data-facing="environment"] video{transform:none}
.silly-filter-overlay{
  position:absolute;
  left:50%;
  top:43%;
  width:210px;
  height:180px;
  transform:translate(-50%,-50%);
  transform-origin:center;
  cursor:grab;
  touch-action:none;
  user-select:none;
  z-index:2;
}
.silly-filter-overlay:active{cursor:grabbing}
.silly-filter-overlay.filter-hidden{opacity:0;pointer-events:none}
.silly-filter-accessory{
  position:absolute;
  left:50%;
  top:-58px;
  transform:translateX(-50%);
  font-size:64px;
  line-height:1;
  filter:drop-shadow(0 5px 3px #0006);
  z-index:5;
}
.silly-filter-effects{position:absolute;inset:0;pointer-events:none;z-index:3}
.silly-filter-effects span{
  position:absolute;
  display:none;
  font-size:clamp(26px,6vw,58px);
  filter:drop-shadow(0 3px 3px #0005);
}
.silly-filter-effects span:nth-child(1){left:7%;top:8%}.silly-filter-effects span:nth-child(2){left:26%;top:21%}
.silly-filter-effects span:nth-child(3){left:48%;top:6%}.silly-filter-effects span:nth-child(4){left:72%;top:22%}
.silly-filter-effects span:nth-child(5){left:88%;top:7%}.silly-filter-effects span:nth-child(6){left:13%;top:63%}
.silly-filter-effects span:nth-child(7){left:34%;top:76%}.silly-filter-effects span:nth-child(8){left:55%;top:59%}
.silly-filter-effects span:nth-child(9){left:78%;top:72%}.silly-filter-effects span:nth-child(10){left:91%;top:49%}
.silly-filter-effects span:nth-child(11){left:4%;top:38%}.silly-filter-effects span:nth-child(12){left:63%;top:37%}
.silly-filters-stage[data-effect="sparkles"] .silly-filter-effects span:nth-child(3n+1),
.silly-filters-stage[data-effect="sparkles"] .silly-filter-effects span:nth-child(3n+2),
.silly-filters-stage[data-effect="snow"] .silly-filter-effects span:nth-child(3n),
.silly-filters-stage[data-effect="lightning"] .silly-filter-effects span:nth-child(5n){display:block;animation:silly-float 1.8s ease-in-out infinite alternate}
.silly-filters-stage[data-effect="snow"] .silly-filter-effects span{animation-name:silly-snow}
.silly-filters-stage[data-effect="lightning"]{animation:silly-flash 1.25s steps(2,end) infinite}
.silly-filters-stage[data-effect="wobble"] .silly-filter-overlay{animation:silly-wobble .75s ease-in-out infinite alternate}
.silly-filter-comic{
  display:none;position:absolute;right:4%;top:7%;z-index:4;padding:20px 14px;
  clip-path:polygon(50% 0,61% 29%,88% 8%,76% 38%,100% 50%,75% 59%,91% 91%,61% 71%,50% 100%,39% 72%,10% 91%,25% 59%,0 50%,25% 39%,11% 9%,39% 29%);
  background:#fff04f;color:#c71f3c;font-size:clamp(30px,8vw,72px);font-weight:1000;text-shadow:2px 2px #fff;
}
.silly-filters-stage[data-effect="comic"] .silly-filter-comic{display:block;animation:silly-pop .6s ease-in-out infinite alternate}
.silly-filter-frame{display:none;position:absolute;inset:8px;z-index:4;border:clamp(8px,2vw,18px) solid #ff66ce;border-radius:18px;align-items:flex-end;justify-content:space-between;padding:12px;color:#fff04f;font-size:clamp(28px,6vw,58px);font-weight:1000;text-shadow:0 3px #6a1b78;pointer-events:none}
.silly-filter-frame span{align-self:flex-start}
.silly-filters-stage[data-effect="frame"] .silly-filter-frame{display:flex}
.silly-filter-countdown{position:absolute;inset:0;z-index:7;place-content:center;background:#10152a55;color:#fff04f;font-size:clamp(80px,20vw,180px);font-weight:1000;text-shadow:0 7px #7b2874;pointer-events:none}
.silly-filter-countdown:not([hidden]){display:grid}
@keyframes silly-float{to{transform:translateY(-18px) rotate(14deg) scale(1.18)}}
@keyframes silly-snow{to{transform:translateY(34px) rotate(90deg)}}
@keyframes silly-flash{50%{filter:brightness(1.7) saturate(1.4)}}
@keyframes silly-wobble{to{margin-left:18px;margin-top:-8px}}
@keyframes silly-pop{to{transform:scale(1.12) rotate(5deg)}}
.filter-part{display:none}
.silly-filter-overlay[data-filter="monkey"] .filter-monkey,
.silly-filter-overlay[data-filter="pumpkin"] .filter-pumpkin,
.silly-filter-overlay[data-filter="ranger"] .filter-ranger,
.silly-filter-overlay[data-filter="claw"] .filter-claw,
.silly-filter-overlay[data-filter="visor"] .filter-visor,
.silly-filter-overlay[data-filter="storm"] .filter-storm,
.silly-filter-overlay[data-filter="web"] .filter-web,
.silly-filter-overlay[data-filter="armor"] .filter-armor,
.silly-filter-overlay[data-filter="strong"] .filter-strong,
.silly-filter-overlay[data-filter="thunder"] .filter-thunder,
.silly-filter-overlay[data-filter="shield"] .filter-shield{display:block}
.monkey-ear{
  position:absolute;
  top:15px;
  width:66px;
  height:76px;
  border:9px solid #56321e;
  border-radius:50%;
  background:#d7955e;
  box-shadow:inset 0 0 0 11px #f0bd8d,0 4px 8px #0004;
}
.monkey-ear-left{left:0;transform:rotate(-18deg)}
.monkey-ear-right{right:0;transform:rotate(18deg)}
.monkey-brow{
  position:absolute;
  top:53px;
  width:55px;
  height:18px;
  border-top:11px solid #4a2a19;
  border-radius:50%;
}
.monkey-brow-left{left:43px;transform:rotate(13deg)}
.monkey-brow-right{right:43px;transform:rotate(-13deg)}
.monkey-muzzle{
  position:absolute;
  left:50%;
  bottom:3px;
  width:112px;
  height:78px;
  transform:translateX(-50%);
  border:8px solid #56321e;
  border-radius:48% 48% 55% 55%;
  background:#efbd8b;
  box-shadow:0 5px 9px #0004;
}
.monkey-muzzle:before{
  content:"";
  position:absolute;
  left:50%;
  top:14px;
  width:29px;
  height:20px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#442518;
}
.monkey-muzzle i{
  position:absolute;
  left:50%;
  bottom:13px;
  width:48px;
  height:18px;
  transform:translateX(-50%);
  border-bottom:7px solid #6f3528;
  border-radius:50%;
}
.monkey-banana{position:absolute;right:-21px;bottom:-18px;font-size:54px;filter:drop-shadow(0 4px 3px #0005)}
.silly-filter-overlay[data-filter="monkey"] .monkey-banana[hidden]{display:none}
.pumpkin-skull{
  position:absolute;left:50%;top:3px;width:132px;height:146px;transform:translateX(-50%);
  border:7px solid #18151d;border-radius:48% 48% 44% 44%;background:#f5f3e9;box-shadow:0 5px 10px #0006;
}
.pumpkin-skull:before,.pumpkin-skull:after{content:"";position:absolute;top:39px;width:38px;height:48px;border-radius:58% 42% 55% 45%;background:#17131a}
.pumpkin-skull:before{left:20px;transform:rotate(12deg)}.pumpkin-skull:after{right:20px;transform:rotate(-12deg)}
.pumpkin-skull i{position:absolute;left:50%;top:83px;width:20px;height:18px;transform:translateX(-50%);clip-path:polygon(50% 0,100% 100%,0 100%);background:#17131a}
.pumpkin-skull b{position:absolute;left:25px;right:25px;bottom:23px;border-bottom:5px solid #17131a}
.pumpkin-skull em{position:absolute;left:50%;bottom:12px;height:24px;border-left:4px solid #17131a;box-shadow:-24px 0 #17131a,-12px 0 #17131a,12px 0 #17131a,24px 0 #17131a}
.pumpkin-bow{position:absolute;left:50%;bottom:-23px;transform:translateX(-50%);font-size:52px;filter:grayscale(1) drop-shadow(0 4px 3px #0005)}
.ranger-helmet{
  position:absolute;left:50%;top:0;width:150px;height:165px;transform:translateX(-50%);
  border:8px solid #f4f4f4;border-radius:48% 48% 38% 38%;background:var(--ranger-color,#d62839);box-shadow:0 6px 11px #0006;
}
.ranger-helmet:before{content:"";position:absolute;left:16px;right:16px;top:48px;height:48px;clip-path:polygon(0 20%,48% 0,100% 20%,84% 78%,50% 100%,16% 78%);background:#111827;border:5px solid #e8f4ff}
.ranger-helmet i{position:absolute;left:30px;right:30px;bottom:24px;height:26px;border:5px solid #fff;border-radius:0 0 50% 50%}
.ranger-helmet b{position:absolute;left:50%;top:5px;height:44px;border-left:7px solid #fff;transform:translateX(-50%)}
.claw-hair{position:absolute;left:13px;right:13px;top:-12px;height:90px;clip-path:polygon(0 100%,8% 15%,25% 58%,39% 0,50% 58%,66% 0,79% 58%,94% 12%,100% 100%);background:#312219;filter:drop-shadow(0 4px 2px #0005)}
.claw-set{position:absolute;bottom:-15px;color:#d9e8f5;font-size:31px;font-weight:1000;letter-spacing:-9px;text-shadow:0 2px 2px #182433;white-space:nowrap}
.claw-left{left:-48px;transform:rotate(-64deg)}.claw-right{right:-48px;transform:rotate(64deg)}
.hero-visor{position:absolute;left:5px;right:5px;top:50px;height:42px;border:8px solid #e8c942;border-radius:12px;background:linear-gradient(#e33,#750515);box-shadow:0 0 18px #ff1f1f,0 5px 7px #0006}
.hero-visor:after{content:"";position:absolute;left:50%;top:-16px;height:66px;border-left:8px solid #e8c942;transform:translateX(-50%)}
.storm-hair{position:absolute;left:50%;top:-42px;transform:translateX(-50%);font-size:148px;filter:grayscale(1) brightness(2) drop-shadow(0 5px 4px #0005)}
.storm-bolts{position:absolute;left:-15px;right:-15px;bottom:-22px;color:#fff34e;font-size:48px;justify-content:space-between;filter:drop-shadow(0 0 7px #75cfff)}
.silly-filter-overlay[data-filter="storm"] .storm-bolts{display:flex}
.web-mask{position:absolute;left:50%;top:0;width:135px;height:160px;transform:translateX(-50%);border:7px solid #182d74;border-radius:48%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 16px,#182d74 17px 19px),repeating-conic-gradient(from 0deg,#d92e3e 0 7deg,#182d74 8deg 10deg,#d92e3e 11deg 43deg);opacity:.9}
.web-mask:before,.web-mask:after{content:"";position:absolute;top:48px;width:32px;height:51px;border:5px solid #111;border-radius:60% 35%;background:#fff}
.web-mask:before{left:23px;transform:rotate(-14deg)}.web-mask:after{right:23px;transform:rotate(14deg)}
.armor-mask{position:absolute;left:50%;top:0;width:145px;height:164px;transform:translateX(-50%);clip-path:polygon(15% 0,85% 0,100% 27%,88% 88%,66% 100%,34% 100%,12% 88%,0 27%);background:linear-gradient(90deg,#a51d2d 0 27%,#e0a51e 28% 72%,#a51d2d 73%);box-shadow:0 5px 10px #0006}
.armor-mask:before,.armor-mask:after{content:"";position:absolute;top:59px;width:39px;height:17px;clip-path:polygon(0 0,100% 20%,75% 100%,10% 75%);background:#bff7ff;box-shadow:0 0 10px #8eefff}
.armor-mask:before{left:18px}.armor-mask:after{right:18px;transform:scaleX(-1)}
.armor-mask i{position:absolute;left:44px;right:44px;bottom:27px;height:22px;border-bottom:6px solid #68202a}
.strong-brows{position:absolute;left:33px;right:33px;top:49px;height:25px;border-top:15px solid #17331c;transform:skewY(-8deg);filter:drop-shadow(0 4px 0 #69bd54)}
.strong-chin{position:absolute;left:50%;bottom:0;width:92px;height:61px;transform:translateX(-50%);border:8px solid #244a27;border-radius:30% 30% 50% 50%;background:#72c65b;opacity:.82}
.thunder-helmet{position:absolute;left:50%;top:-18px;width:165px;height:135px;transform:translateX(-50%);padding-top:15px;border:8px solid #c8d2dc;border-radius:50% 50% 32% 32%;background:#6c7b89;color:#fff35f;font-size:64px;text-shadow:0 0 8px #fff}
.thunder-helmet:before,.thunder-helmet:after{content:"";position:absolute;top:4px;width:46px;height:76px;clip-path:polygon(100% 0,45% 48%,100% 100%,0 68%,20% 30%);background:#dce6ed}
.thunder-helmet:before{left:-37px}.thunder-helmet:after{right:-37px;transform:scaleX(-1)}
.hero-shield{position:absolute;right:-32px;bottom:-25px;width:92px;height:92px;border:9px solid #d93043;border-radius:50%;background:radial-gradient(circle,#2671ba 0 31%,#fff 32% 48%,#d93043 49%);color:#fff;font-size:54px;line-height:92px;text-align:center;box-shadow:0 5px 9px #0005}
.silly-filter-hint{margin:12px 0 8px;color:#fff;font-weight:850}
.silly-filter-capture-dock{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 2px 2px}
.silly-filter-capture-dock button:last-child{background:#d13b79!important;box-shadow:0 6px 0 #851e4b!important}
.silly-filter-picker,.silly-filter-variants,.silly-filter-fun,.silly-filter-adjustments{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:10px 0}
.silly-filter-picker button{min-width:150px}
.silly-filter-variants button{flex:1 1 130px;max-width:210px;background:#2857a8!important;box-shadow:0 6px 0 #173973!important}
.silly-filter-adjustments button{flex:1 1 120px}
.silly-filter-fun button{flex:1 1 140px;background:#176c76!important;box-shadow:0 6px 0 #0d444b!important}
.silly-filter-picker button[aria-pressed="true"],.silly-filter-variants button[aria-pressed="true"],.silly-filter-fun button[aria-pressed="true"],.silly-filter-adjustments button[aria-pressed="true"]{outline:4px solid #fff08a;outline-offset:2px}
.silly-filters-camera-actions{display:flex;gap:12px;justify-content:center;padding:14px 4px 4px}
.silly-filters-camera-actions button{flex:1}
.silly-filters-camera-actions button:last-child{background:#b52b42;box-shadow:0 6px 0 #751827}
.silly-filters-error{border-color:#d65b6c;background:#fff7f8}
.silly-filter-photo{max-width:680px;margin:18px auto;padding:14px;border-radius:22px;background:#fff;color:#37445f}
.silly-filter-photo img{display:block;width:100%;max-height:62vh;border-radius:16px;object-fit:contain;background:#17213d}
.silly-filter-photo p{font-weight:850}
.silly-filter-photo>div,.silly-filter-parent-approval form>div{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.silly-filter-parent-approval{max-width:520px;border:4px solid #8d2d84;border-radius:24px;padding:0}
.silly-filter-parent-approval::backdrop{background:#10152acc}
.silly-filter-parent-approval form{display:grid;gap:14px;padding:24px}
.silly-filter-parent-approval h3,.silly-filter-parent-approval p{margin:0}
.silly-filter-parent-approval input{min-height:52px;border:2px solid #8d2d84;border-radius:12px;padding:8px;font-size:22px}
@media(max-width:700px){
  .silly-filters-game{margin:16px 8px 34px;padding:18px 10px}
  .silly-filters-top{align-items:flex-start;flex-direction:column}
  .silly-filters-permission,.silly-filters-error{padding:20px 12px}
  .silly-filters-camera{padding:7px;border-radius:20px}
  .silly-filter-preview-shell{
    position:sticky;
    top:max(6px,env(safe-area-inset-top));
    z-index:20;
    padding:5px;
    border-radius:19px;
    background:#17213d;
    box-shadow:0 8px 22px #05081499;
  }
  .silly-filters-stage video{height:min(42vh,390px);height:min(42dvh,390px);max-height:none}
  .silly-filter-capture-dock{padding-top:8px}
  .silly-filter-capture-dock button{min-height:52px!important;padding:9px 8px!important}
  .silly-filter-overlay{width:170px;height:146px}
  .monkey-ear{width:53px;height:61px;border-width:7px}
  .monkey-brow{top:43px;width:44px;border-top-width:9px}
  .monkey-brow-left{left:35px}.monkey-brow-right{right:35px}
  .monkey-muzzle{width:90px;height:63px;border-width:6px}
  .monkey-banana{font-size:44px}
  .silly-filter-adjustments button{flex-basis:44%;min-height:58px}
  .silly-filters-camera-actions{flex-direction:column}
  .silly-filters-camera-actions button{width:100%;min-height:62px}
}
@media(prefers-reduced-motion:reduce){
  .silly-filters-stage,.silly-filter-overlay,.silly-filter-effects span,.silly-filter-comic{animation:none!important;transition:none!important}
}