/* ===== Иглобрюх osmos.guru — маскот всего сайта (assets/js/puffer.js) ===== */
.puf{--puf:var(--acid,#d9ff43);position:fixed;right:clamp(10px,2.4vw,34px);bottom:clamp(10px,2.4vw,30px);z-index:1500;pointer-events:none;transform:translateX(160%);transition:transform 1.4s cubic-bezier(.25,.8,.25,1),opacity .3s}
.puf.in{transform:none;transition:transform 4.5s cubic-bezier(.45,0,.35,1),opacity .3s}
.puf.visit,.puf.in.visit{transform:translate(var(--vx,0),var(--vy,0));transition:transform 2.2s cubic-bezier(.45,0,.3,1)}
.puf.visit .puf-pos{position:relative;transform:none}
.puf.visit .puf-say{position:absolute;left:calc(100% + 14px);top:50%;width:min(290px,calc(100vw - 140px));max-width:none;margin:0;border-radius:22px 22px 22px 6px;transform-origin:0 50%;transform:translateY(-50%) scale(0)}
.puf.visit.talk .puf-say{transform:translateY(-50%) scale(1)}
.puf.visit-l .puf-say{left:auto;right:calc(100% + 14px);border-radius:22px 22px 6px 22px;transform-origin:100% 50%}
body:has(dialog[open]) .puf{opacity:0;visibility:hidden}
.puf-pos{display:flex;align-items:flex-end;gap:10px;transition:transform 3.5s cubic-bezier(.45,0,.35,1)}
.puf.rise .puf-pos{transform:translateY(var(--rise,-90px))}

.puf-fish{pointer-events:auto;position:relative;flex:none;width:78px;height:60px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.puf-fish:focus-visible{outline:none;box-shadow:0 0 0 3px var(--paper,#f1f3ee),0 0 0 5px var(--ink,#08110f)}
.puf-bob{display:block;width:100%;height:100%;animation:puf-bob 5s ease-in-out infinite}
@keyframes puf-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.puf-svg{display:block;width:100%;height:100%;overflow:visible;transition:transform 1.2s cubic-bezier(.45,0,.35,1)}
.puf.turn .puf-svg{transform:scaleX(-1)}
.puf-body{fill:var(--puf);stroke:#08110f;stroke-width:4;transform-origin:55px 45px;transition:fill 2.5s ease,transform .35s cubic-bezier(.3,1.6,.5,1)}
.puf-tail{fill:var(--mint-dark,#0b8876);stroke:#08110f;stroke-width:3;stroke-linejoin:round}
.puf-fin{fill:rgba(8,17,15,.16)}
.puf-eye{fill:#08110f}.puf-glint{fill:#fff}
.puf-mouth{fill:none;stroke:#08110f;stroke-width:3;stroke-linecap:round}
.puf-spikes line{stroke:#08110f;stroke-width:3.5;stroke-linecap:round}
.puf-spikes{opacity:0;transform-origin:55px 45px;transform:scale(.6);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.puf.puffed .puf-body{transform:scale(1.3)}
.puf.puffed .puf-spikes{opacity:1;transform:scale(1.15)}
.puf.puffed .puf-bob{animation-play-state:paused}
.puf.puffed .puf-mouth{d:path("M25 47 q4 6 8 0")}

/* пузырьки изо рта */
.puf-fish::before,.puf-fish::after{content:"";position:absolute;left:4px;top:24px;width:9px;height:9px;border-radius:50%;border:2px solid rgba(8,17,15,.45);opacity:0;pointer-events:none}
:root[data-theme="dark"] .puf-fish::before,:root[data-theme="dark"] .puf-fish::after{border-color:rgba(230,237,232,.5)}
.puf.blow .puf-fish::before{animation:puf-air 1.8s ease-out}
.puf.blow .puf-fish::after{animation:puf-air 1.8s ease-out .5s}
@keyframes puf-air{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(-14px,-60px) scale(1.3)}}

/* реплика */
.puf-say{pointer-events:auto;position:relative;margin-bottom:34px;background:var(--white,#fff);color:var(--ink,#08110f);border:2px solid var(--ink,#08110f);border-radius:22px 22px 6px 22px;padding:14px 46px 14px 16px;max-width:270px;box-shadow:6px 7px 0 var(--ink,#08110f);font:500 15px/1.38 var(--font-body,"Onest",system-ui,sans-serif);transform-origin:100% 100%;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
:root[data-theme="dark"] .puf-say{box-shadow:6px 7px 0 rgba(0,0,0,.6)}
.puf.talk .puf-say{transform:scale(1)}
.puf-say p{margin:0}
.puf-x{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:none;color:inherit;font:400 24px/1 var(--font-body,system-ui);cursor:pointer;border-radius:50%}
.puf-x:hover{background:rgba(8,17,15,.06)}
.puf-go button{display:inline-flex;align-items:center;min-height:40px;margin-top:6px;padding:0 16px;border-radius:var(--r-pill,999px);border:0;background:var(--ink,#08110f);color:var(--paper,#f1f3ee);font:800 14px var(--font-body,system-ui);cursor:pointer}
.puf-go a{display:inline-flex;align-items:center;min-height:40px;margin-top:4px;font-weight:800;text-decoration:underline;text-underline-offset:3px;color:inherit}

/* злой иглобрюх */
.puf-rage{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:20px;background:rgba(8,17,15,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s;cursor:pointer}
.puf-rage.on{opacity:1}
.puf-rage-in{max-width:780px;text-align:center;color:#fff}
.puf-rage-fish{width:min(60vw,400px);aspect-ratio:128/98;margin:0 auto 12px}
.puf-rage .puf-body{fill:var(--orange,#ff754a);transform:scale(1.3)}
.puf-rage .puf-spikes{opacity:1;transform:scale(1.15)}
.puf-rage .puf-spikes line{stroke:#fff}
.puf-rage .puf-body,.puf-rage .puf-tail,.puf-rage .puf-mouth{stroke:#fff}
.puf-rage .puf-mouth{d:path("M24 52 q4 -5 8 0")}
.puf-rage.on .puf-rage-fish{animation:puf-angry .7s cubic-bezier(.3,1.6,.5,1) both,puf-shake .12s linear .7s 6 alternate}
@keyframes puf-angry{from{transform:scale(.15) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
@keyframes puf-shake{from{translate:-4px 0}to{translate:4px 0}}
.puf-rage b{display:block;font:900 clamp(24px,3.4vw,46px)/1.04 var(--font-display,"Unbounded",system-ui);letter-spacing:-.05em}
.puf-rage p{margin:16px auto 0;max-width:34em;font:400 17px/1.45 var(--font-body,"Onest",system-ui);color:rgba(255,255,255,.82)}
.puf-rage small{display:block;margin-top:18px;font:500 12px var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* пасхалка: сайт под водой */
.puf-sunk{transition:transform 1.1s cubic-bezier(.5,-0.3,.6,1.4) var(--egg-d,0ms),filter .8s;transform:translate(var(--egg-x,0),var(--egg-y,80px)) rotate(var(--egg-r,4deg))}
html:not(.puf-flooded) .puf-sunk,html:not(.puf-flooded) [style*="--egg-r"]{transition:transform .8s cubic-bezier(.3,1.4,.5,1)}
html.puf-flooded body{overflow:hidden}
.puf-egg{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;padding:20px;pointer-events:none}
.puf-egg-water{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--blue,#465cff) 30%,transparent),color-mix(in srgb,var(--mint,#24d8bc) 45%,transparent));mix-blend-mode:multiply;opacity:0;transform:translateY(100%);transition:transform 1.2s cubic-bezier(.3,.8,.3,1),opacity .6s}
.puf-egg.on .puf-egg-water{opacity:1;transform:none}
.puf-egg-water i{position:absolute;bottom:-20px;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.75);opacity:0}
.puf-egg.on .puf-egg-water i{animation:puf-rise 3.4s ease-in infinite}
.puf-egg-water i:nth-child(1){left:6%;animation-delay:.1s}.puf-egg-water i:nth-child(2){left:14%;animation-delay:1.2s;width:9px;height:9px}.puf-egg-water i:nth-child(3){left:22%;animation-delay:.6s}.puf-egg-water i:nth-child(4){left:31%;animation-delay:2s;width:20px;height:20px}.puf-egg-water i:nth-child(5){left:39%;animation-delay:.3s}.puf-egg-water i:nth-child(6){left:47%;animation-delay:1.6s;width:10px;height:10px}.puf-egg-water i:nth-child(7){left:55%;animation-delay:.9s}.puf-egg-water i:nth-child(8){left:63%;animation-delay:2.4s;width:18px;height:18px}.puf-egg-water i:nth-child(9){left:70%;animation-delay:.2s}.puf-egg-water i:nth-child(10){left:77%;animation-delay:1.4s;width:8px;height:8px}.puf-egg-water i:nth-child(11){left:84%;animation-delay:.7s}.puf-egg-water i:nth-child(12){left:90%;animation-delay:2.8s;width:16px;height:16px}.puf-egg-water i:nth-child(13){left:96%;animation-delay:1s}.puf-egg-water i:nth-child(14){left:3%;animation-delay:2.2s;width:11px;height:11px}
@keyframes puf-rise{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(-105vh) translateX(20px);opacity:0}}
.puf-egg-msg{position:relative;max-width:640px;text-align:center;background:var(--white,#fff);color:var(--ink,#08110f);border:3px solid var(--ink,#08110f);border-radius:var(--r-xl,32px);padding:24px 28px 26px;box-shadow:10px 12px 0 var(--ink,#08110f);pointer-events:auto;opacity:0;transform:scale(.6) rotate(-6deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .5s,opacity .3s .5s}
.puf-egg.on .puf-egg-msg{opacity:1;transform:none}
.puf-egg-msg .puf-rage-fish{width:min(46vw,220px);margin:-90px auto 4px}
.puf-egg-msg .puf-body{fill:var(--blue,#465cff);transform:scale(1.3)}
.puf-egg-msg .puf-spikes{opacity:1;transform:scale(1.15)}
.puf-egg-msg b{display:block;text-wrap:balance;font:900 clamp(24px,3vw,40px)/1.04 var(--font-display,"Unbounded",system-ui);letter-spacing:-.05em}
.puf-egg-msg p{margin:12px auto 18px;max-width:30em;font:400 16px/1.45 var(--font-body,"Onest",system-ui);color:var(--muted-strong,#446059)}
.puf-egg-msg button{min-height:48px;padding:0 24px;border-radius:999px;border:0;background:var(--ink,#08110f);color:var(--paper,#f1f3ee);font:800 15px var(--font-body,system-ui);cursor:pointer}
.puf-egg-msg button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--white,#fff),0 0 0 5px var(--ink,#08110f)}

@media (max-width:620px){
  .puf.visit .puf-say{left:auto;right:-30px;top:calc(100% + 12px);width:min(300px,calc(100vw - 40px));border-radius:22px 6px 22px 22px;transform-origin:100% 0;transform:scale(0)}
  .puf.visit.talk .puf-say{transform:scale(1)}
  .puf-fish{width:60px;height:46px}
  .puf-say{max-width:calc(100vw - 100px);margin-bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  .puf,.puf-pos,.puf-svg,.puf-body,.puf-spikes,.puf-say{transition:none}
  .puf-bob,.puf-rage.on .puf-rage-fish,.puf-egg.on .puf-egg-water i{animation:none}
  .puf-egg-water,.puf-egg-msg,.puf-sunk{transition:opacity .3s}
}

/* прогулка вдоль низа экрана */
.puf.in.wander{transform:translate(var(--wx,-30vw),var(--wy,0));transition:transform 8s cubic-bezier(.45,0,.35,1)}
/* бормотание — маленький пузырь */
.puf.mumbling .puf-say{font-size:14px;padding:10px 42px 10px 14px;box-shadow:4px 5px 0 var(--ink,#08110f)}

/* ===== Сборка системы, пока экран не трогают ===== */
.puf-build{position:fixed;left:clamp(12px,2.4vw,34px);right:clamp(96px,10vw,140px);bottom:clamp(12px,2.4vw,30px);z-index:1490;pointer-events:none;opacity:0;transform:translateY(24px);transition:opacity .45s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.puf-build.in{opacity:1;transform:none}
.pb-line{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:6px;max-width:760px;padding:12px 16px;border-radius:22px;background:var(--white,#fff);color:var(--ink,#08110f);border:2px solid var(--ink,#08110f);box-shadow:6px 7px 0 var(--ink,#08110f)}
.pb-pipe{position:absolute;left:24px;right:24px;bottom:22px;height:6px;border-radius:3px;background:rgba(8,17,15,.08);overflow:hidden}
.pb-pipe::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--mint,#24d8bc) 0 14px,transparent 14px 26px);transform:translateX(-100%)}
.puf-build.flow .pb-pipe::after{transform:none;animation:pb-flow 1s linear infinite}
@keyframes pb-flow{from{background-position:0 0}to{background-position:26px 0}}
.pb-slot{position:relative;display:grid;place-items:center;width:clamp(30px,6vw,56px);aspect-ratio:1;border-radius:12px;border:2px dashed rgba(8,17,15,.18);background:var(--white,#fff)}
.pb-slot svg{width:80%;height:80%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;opacity:0;transform:translateY(-30px) scale(.4);transition:opacity .3s,transform .5s cubic-bezier(.3,1.7,.5,1)}
.pb-slot.on{border-style:solid;border-color:var(--ink,#08110f);background:var(--mint-soft,#dffbf4)}
.pb-slot.on svg{opacity:1;transform:none}
.pb-clean{fill:color-mix(in srgb,var(--mint,#24d8bc) 35%,transparent)}
.pb-slot text,.pgm-bank text,.pgm-slot text{font:700 8px var(--font-mono,monospace);fill:currentColor;stroke:none}
:root[data-theme="dark"] .pb-line{box-shadow:6px 7px 0 rgba(0,0,0,.6)}

/* ===== Мини-игра ===== */
html.puf-gaming body{overflow:hidden}
.puf-game{position:fixed;inset:0;z-index:2600;display:grid;place-items:center;padding:16px;background:rgba(8,17,15,.6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .25s;overflow:auto}
.puf-game.in{opacity:1}
.pgm-panel{position:relative;width:min(600px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper,#f1f3ee);color:var(--ink,#08110f);border:3px solid var(--ink,#08110f);border-radius:28px;box-shadow:10px 12px 0 var(--ink,#08110f);padding:20px 22px 22px;transform:scale(.92);transition:transform .35s cubic-bezier(.3,1.5,.5,1);font-family:var(--font-body,"Onest",system-ui)}
.puf-game.in .pgm-panel{transform:none}
.pgm-x{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink,#08110f);background:var(--white,#fff);color:inherit;font:400 24px/1 system-ui;cursor:pointer}
.pgm-head{display:flex;align-items:center;gap:14px;padding-right:48px}
.pgm-fishy{flex:none;width:70px;aspect-ratio:128/98}
.pgm-fishy .puf-body{fill:var(--acid,#d9ff43)}
.puf-game.hurry .pgm-fishy .puf-body{fill:var(--orange,#ff754a)}
.puf-game.won .pgm-fishy .puf-body{fill:var(--mint,#24d8bc);transform:scale(1.25)}
.puf-game.won .pgm-fishy .puf-spikes{opacity:1;transform:scale(1.1)}
.pgm-eye{margin:0;font:600 12px var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--mint-dark,#0b8876)}
.pgm-head h2{margin:4px 0 0;font:900 clamp(22px,3.4vw,30px)/1.02 var(--font-display,"Unbounded",system-ui);letter-spacing:-.055em}
.pgm-say{margin:14px 0 0;min-height:44px;font-size:15px;line-height:1.45}
.pgm-track{display:flex;align-items:center;gap:4px;margin-top:14px}
.pgm-track>i{flex:1 1 6px;height:4px;border-radius:2px;background:rgba(8,17,15,.12)}
.pgm-slot{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(50px,13vw,74px);aspect-ratio:1;border-radius:14px;border:2px dashed rgba(8,17,15,.25);background:var(--white,#fff);color:var(--muted-strong,#446059)}
.pgm-slot b{font:800 18px var(--font-display,system-ui)}
.pgm-slot svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.pgm-slot small{display:none}
.pgm-slot.on{border-style:solid;border-color:var(--ink,#08110f);background:var(--mint-soft,#dffbf4);color:var(--ink,#08110f);animation:pgm-pop .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes pgm-pop{from{transform:scale(.6)}to{transform:none}}
.pgm-time{display:flex;align-items:center;gap:10px;margin-top:14px}
.pgm-time i{flex:1;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--mint,#24d8bc),var(--acid,#d9ff43));transform-origin:left;transition:transform .1s linear}
.puf-game.hurry .pgm-time i{background:var(--orange,#ff754a)}
.pgm-time span{font:700 14px var(--font-mono,monospace);min-width:44px;text-align:right}
.pgm-bank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.pgm-bank button{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 10px;border-radius:14px;border:2px solid var(--ink,#08110f);background:var(--white,#fff);color:var(--ink,#08110f);font:700 14px/1.15 var(--font-body,system-ui);text-align:left;cursor:pointer;transition:transform .15s,background .2s,opacity .2s}
.pgm-bank button svg{flex:none;width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.pgm-bank button:not(:disabled):hover{background:var(--acid,#d9ff43);transform:translateY(-2px)}
.pgm-bank button:disabled{cursor:default}
.pgm-bank button:disabled:not(.used):not(.nope){opacity:.55}
.pgm-bank button.used{opacity:.25}
.pgm-bank button.nope{animation:pgm-nope .4s;background:#ffe3d8;border-color:var(--orange,#ff754a)}
@keyframes pgm-nope{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.pgm-start,.pgm-claim{display:block;width:100%;min-height:56px;margin-top:16px;border-radius:999px;border:3px solid var(--ink,#08110f);background:var(--mint,#24d8bc);color:#08110f;font:900 18px var(--font-display,system-ui);letter-spacing:-.03em;box-shadow:5px 6px 0 var(--ink,#08110f);cursor:pointer}
.pgm-start:hover,.pgm-claim:hover{background:var(--acid,#d9ff43)}
.pgm-win{margin-top:14px}
.pgm-big{margin:0;font:900 clamp(34px,6vw,52px)/1 var(--font-display,system-ui);letter-spacing:-.06em;color:var(--mint-dark,#0b8876)}
.pgm-wtxt{margin:8px 0 0;font-size:16px;line-height:1.45}
.pgm-prize{margin:14px 0 0;padding:0;border:0;display:grid;gap:8px}
.pgm-prize legend{font:600 12px var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-strong,#446059);margin-bottom:8px}
.pgm-prize label{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:14px;border:2px solid rgba(8,17,15,.2);background:var(--white,#fff);font-weight:700;cursor:pointer}
.pgm-prize label:has(input:checked){border-color:var(--ink,#08110f);background:var(--mint-soft,#dffbf4)}
.pgm-prize input{width:20px;height:20px;accent-color:var(--mint-dark,#0b8876)}
.pgm-code{margin:14px 0 0;font-size:16px}
.pgm-code b{font:700 20px var(--font-mono,monospace);letter-spacing:.06em;padding:4px 10px;border-radius:8px;background:var(--acid,#d9ff43);color:#08110f}
.pgm-act{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.pgm-again{min-height:56px;padding:0 18px;border-radius:999px;border:2px solid var(--ink,#08110f);background:transparent;color:inherit;font:700 15px var(--font-body,system-ui);cursor:pointer}
.pgm-fine{display:block;margin-top:10px;font-size:13px;color:var(--muted-strong,#446059)}
:root[data-theme="dark"] .pgm-panel{box-shadow:10px 12px 0 rgba(0,0,0,.6)}
@media (max-width:620px){
  .puf-game{padding:0;place-items:stretch}
  .pgm-panel{width:100%;max-height:none;min-height:100dvh;border-radius:0;border:0;box-shadow:none;padding:16px 16px 24px}
  .pgm-bank{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgm-act{grid-template-columns:1fr}
  .puf-build{right:84px}
  .pb-line{padding:8px 10px;gap:3px}
}
@media (prefers-reduced-motion:reduce){.puf-build,.pgm-panel,.pgm-slot.on,.pgm-bank button.nope{transition:none;animation:none}}

/* объёмный иглобрюх (Иван 14.10: «как кнопки»): блик, тень снизу, мягкая тень под рыбкой */
.puf-svg{filter:drop-shadow(0 6px 6px rgba(8,17,15,.28))}
.puf-vol,.puf-volg{pointer-events:none}
.puf-volg{transform-origin:55px 45px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.puf.puffed .puf-volg,.puf-rage .puf-volg,.puf-egg-msg .puf-volg{transform:scale(1.3)}