@import url("https://fonts.googleapis.com/css2?family=Bangers&display=swap");
/* racc-fx.css: shared sticker reactions + manga-impact motion (RACC "fun" layer).
   Pairs with static/racctrusted/js/racc-fx.js (RaccFX), templates/racctrusted/_fx/stickers.html (the SVG
   sprite) and _fx/reaction_bar.html. Everything animated is switched off under prefers-reduced-motion.
   Class names keep the ttm- prefix they were born with; any page can use them. Variables fall back to
   the values below, so a page without .ttm still works. */
:root{--ttm-spring:cubic-bezier(.2,1.4,.4,1);--ttm-accent:#2f6bff;--ttm-accent-d:#1f55e0;--ttm-accent-soft:#eaf0ff;--ttm-accent-ink:#1f4fd1;--ttm-field:#f4f5fa;--ttm-muted:#6b7686;--ttm-shadow:0 1px 2px rgba(20,30,60,.06),0 12px 30px rgba(20,30,60,.06)}

/* a sticker: SVG art in a tilted, softly shadowed box that bobs and blinks */
.st{--sz:30px;display:inline-block;width:var(--sz);height:var(--sz);flex:none;filter:drop-shadow(0 2px 2px rgba(27,21,48,.3));animation:st-bob 3.4s ease-in-out infinite;animation-delay:var(--d,0s);transform-origin:50% 80%}
.st svg{display:block;width:100%;height:100%;transform:rotate(var(--tilt,0deg));overflow:visible}
.st--lg{--sz:52px}
.st--md{--sz:36px}
.st-eyes{transform-box:fill-box;transform-origin:center;animation:st-blink 5.4s infinite;animation-delay:var(--bd,0s)}
.st-eye-r{transform-box:fill-box;transform-origin:center;transform:scaleY(var(--wink,1));transition:transform .12s}
.ttm-rxb:hover:not([disabled]) .st,.ttm-rxb:focus-visible .st,.tray-b:hover .st,.tray-b:focus-visible .st,.rxpill:hover .st{--wink:.08;animation:st-wiggle .6s ease-in-out infinite}
.st.squash{animation:st-squash .52s cubic-bezier(.2,1.6,.4,1)}
.st.deflate{animation:st-deflate .32s ease-out}

/* the reaction bar: a pill that opens a tray, plus the stickers people used */
.ttm-rx{align-items:center;position:relative}
.rxpill{border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:.84rem;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px 0 10px;border-radius:999px;background:var(--ttm-accent-soft);color:var(--ttm-accent-ink);touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;transition:transform .2s var(--ttm-spring),background .15s}
.rxpill:hover{background:#e2e5ff;transform:translateY(-1px)}
.rxpill:active{transform:scale(.96)}
.rxpill.is-mine{background:var(--ttm-accent);color:#fff}
/* the stickers people used: always all four, a count only once there is one. Mine = accent ring + glow
   and a filled count chip. Colours of the art itself never change. */
.ttm-rx{display:flex;flex-wrap:wrap;gap:2px 4px}
.ttm-rxb{border:0;cursor:pointer;font-family:inherit;font-weight:800;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:16px;background:transparent;color:#3b4252;position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,box-shadow .2s,transform .2s var(--ttm-spring)}
.ttm-rxb .st{--sz:36px}
.ttm-rxb:hover{background:var(--ttm-accent-soft)}
.ttm-rxb:active{transform:scale(.92)}
.ttm-rxb .n{position:absolute;right:-1px;bottom:1px;font-variant-numeric:tabular-nums;font-size:.68rem;line-height:1;padding:3px 5px 2px;border-radius:999px;background:#eceff6;color:#2b3445;min-width:18px;text-align:center;box-shadow:0 0 0 2px #fff;pointer-events:none}
.ttm-rxb .n:empty,.ttm-rxb.is-zero .n{display:none}
.ttm-rxb.is-on{background:var(--ttm-accent-soft);box-shadow:inset 0 0 0 2px var(--ttm-accent),0 0 16px rgba(47,107,255,.4)}
.ttm-rxb.is-on .n{background:var(--ttm-accent);color:#fff}
.ttm-rx .ttm-rxb.is-nope .st{animation:st-nope .5s ease-in-out}
.ttm-rxb[disabled]{cursor:default}
.ttm-rxb--cmt{width:auto;padding:0 10px;gap:5px;font-size:.84rem;text-decoration:none!important;color:#3b4252!important}
.ttm-rxb--cmt .n{position:static;background:transparent;box-shadow:none;padding:0;min-width:0;font-size:.84rem;color:#3b4252}
.ttm-rxb--cmt:hover{background:#f2f3f8}
@media(max-width:420px){.ttm-rx{gap:0 1px}.ttm-rxb{width:44px}.ttm-rxb--cmt{width:auto}.ttm-rxb .st{--sz:34px}.rxpill{padding:0 12px 0 8px}}
/* tap on a sticker you cannot use: a friendly sheet (sign in / confirm) or a small toast (your own post) */
.rx-sheet{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);width:min(92vw,380px);background:#1b2330;color:#fff;border-radius:22px;padding:14px 16px;z-index:10000;box-sizing:border-box;display:flex;align-items:center;gap:12px;opacity:0;pointer-events:none;box-shadow:0 18px 44px rgba(10,16,30,.4);transition:opacity .25s,transform .4s var(--ttm-spring);font-family:inherit;font-weight:600;font-size:.92rem;line-height:1.35}
.rx-sheet.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.rx-sheet .st{--sz:40px}
.rx-sheet__t{flex:1;min-width:0}
.rx-sheet a{flex:none;background:var(--ttm-accent);color:#fff!important;font-weight:800;text-decoration:none;border-radius:999px;padding:11px 16px;min-height:44px;display:inline-flex;align-items:center}
.rx-sheet button{flex:none;border:0;background:transparent;color:#aab4c6;font-size:1.3rem;min-width:44px;min-height:44px;cursor:pointer}
.rx-sheet--toast .rx-sheet__t{flex:0 1 auto}
.rx-sheet--toast{width:max-content;max-width:92vw;padding:11px 18px;text-align:center;justify-content:center}
@keyframes st-nope{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg) translateX(-2px)}45%{transform:rotate(12deg) translateX(2px)}70%{transform:rotate(-7deg)}}
.rxtray{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;gap:4px;background:#fff;border-radius:30px;padding:8px 10px;box-shadow:0 14px 36px rgba(27,21,48,.3),0 0 0 2px #1b1530;z-index:30}
.rxtray[hidden]{display:none}
.rxtray::after{content:"";position:absolute;left:22px;bottom:-9px;width:16px;height:16px;background:#fff;border-right:2px solid #1b1530;border-bottom:2px solid #1b1530;transform:rotate(45deg)}
.tray-b{border:0;background:transparent;cursor:pointer;width:56px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:18px;padding:0;font-family:Bangers,Impact,sans-serif;font-size:.7rem;letter-spacing:.04em;color:#1b1530;touch-action:manipulation;animation:tray-in .5s cubic-bezier(.2,1.8,.4,1) both;animation-delay:calc(var(--i,0)*60ms)}
.tray-b .st{--sz:40px}
.tray-b:hover,.tray-b:focus-visible{background:#f3f1ff;outline:0}
.tray-b.is-on{background:#fff0a8}

/* manga impact layer (spawned by ttm-fx.js, removed when each animation ends) */
.fx-layer{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:9999}
.fx-burst,.fx-lines{position:absolute;left:-80px;top:-80px;width:160px;height:160px;overflow:visible}
.fx-burst{animation:fx-burst .5s ease-out forwards}
.fx-lines{animation:fx-lines .45s ease-out forwards}
.fx-p{position:absolute;left:-9px;top:-9px;width:18px;height:18px;will-change:transform,opacity}
.fx-word{position:absolute;left:0;top:-52px;white-space:nowrap;font:400 38px/1 Bangers,Impact,"Arial Black",sans-serif;letter-spacing:.05em;color:#ffd23f;-webkit-text-stroke:7px #1b1530;paint-order:stroke fill;text-shadow:3px 4px 0 #6d5cff;transform:translate(-50%,-50%) rotate(-8deg);animation:fx-word 1s cubic-bezier(.2,1.5,.4,1) forwards}
.fx-combo{position:absolute;left:0;top:-10px;white-space:nowrap;font:400 24px/1 Bangers,Impact,sans-serif;letter-spacing:.06em;color:#fff;background:#ff4fa3;padding:6px 14px 5px;border-radius:14px;border:3px solid #1b1530;box-shadow:3px 4px 0 #1b1530;transform:translate(-50%,-50%) rotate(6deg);animation:fx-combo .9s cubic-bezier(.2,1.6,.4,1) forwards}
.nroll{display:inline-flex;flex-direction:column;height:1.25em;line-height:1.25em;overflow:hidden;vertical-align:middle}
.nroll>span{display:block;animation:fx-roll .42s cubic-bezier(.2,1.2,.4,1) forwards}

/* GOT ONE! stamp and screen shake on a freshly posted success */
.fx-shake{animation:fx-shake .5s linear}
.fx-stamp{white-space:nowrap;position:absolute;left:50%;top:50%;z-index:6;pointer-events:none;font:400 clamp(2.4rem,11vw,4.6rem)/.95 Bangers,Impact,sans-serif;letter-spacing:.05em;text-align:center;color:#ff4fa3;background:rgba(255,255,255,.92);border:6px solid #ff4fa3;border-radius:18px;padding:.12em .35em .04em;-webkit-text-stroke:2px #1b1530;paint-order:stroke fill;text-shadow:4px 5px 0 #ffd23f;box-shadow:0 0 0 4px #fff,0 8px 24px rgba(27,21,48,.35);transform:translate(-50%,-50%) rotate(-10deg);animation:fx-slam .55s cubic-bezier(.2,1.3,.4,1) both}
.fx-thanks{position:absolute;left:50%;top:0;width:76px;height:76px;margin-left:-38px;pointer-events:none;animation:fx-thanks 1.1s cubic-bezier(.2,1.6,.4,1) forwards}
.ttm-thanks{position:relative;overflow:visible}

/* FAB sparkle on hover */
.ttm-fab::before,.ttm-fab::after{content:"";position:absolute;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Cpath d='M0 -3.6 L1 -1 L3.6 0 L1 1 L0 3.6 L-1 1 L-3.6 0 L-1 -1 Z' fill='%23ffd23f' stroke='%231b1530' stroke-width='.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;pointer-events:none;transition:opacity .2s}
.ttm-fab::before{left:-9px;top:-9px}
.ttm-fab::after{right:-8px;bottom:-8px;width:14px;height:14px}
.ttm-fab:hover::before,.ttm-fab:focus-visible::before{opacity:1;animation:fx-twinkle 1s ease-in-out infinite}
.ttm-fab:hover::after,.ttm-fab:focus-visible::after{opacity:1;animation:fx-twinkle 1s .4s ease-in-out infinite}

/* motion that runs on scroll and touch: transform and opacity only */
.ttm-rv{opacity:0;transform:translateY(24px) scale(.97)}
.ttm-rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .65s var(--ttm-spring);transition-delay:var(--rvd,0s)}
.ttm-pop{animation:ttm-popin .6s var(--ttm-spring) backwards}
.ttm-fab{animation:ttm-breathe 3.4s ease-in-out infinite}
.ttm-seg{position:relative;touch-action:pan-y pinch-zoom}
.ttm-seg__ind{position:absolute;left:0;top:14px;height:40px;border-radius:999px;background:var(--ttm-accent);box-shadow:0 6px 16px rgba(109,92,255,.35);transition:transform .4s var(--ttm-spring),width .4s var(--ttm-spring);z-index:0;pointer-events:none}
.ttm-seg.has-ind a{position:relative;z-index:1;background:transparent;box-shadow:none}
.ttm-seg.has-ind a.is-on{background:transparent;box-shadow:none;color:#fff}
.ttm-feedzone,[data-ttm-detail]{touch-action:pan-y pinch-zoom}
.ttm-sheet__grab,.ttm-sheet__head{touch-action:none;cursor:grab}
.ttm-sheet.dragging{transition:none}
/* photo carousel: native scroll-snap swipe, dots as buttons */
.ttm-car{position:relative;background:linear-gradient(135deg,#eef0ff,#f6f0ff)}
.ttm-car__track{touch-action:pan-y;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ttm-car__track::-webkit-scrollbar{display:none}
.ttm-car__track>.ttm-photo{flex:0 0 100%;scroll-snap-align:center}
.ttm-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:2px;pointer-events:none}
.ttm-dots button{pointer-events:auto;width:22px;height:22px;border:0;background:transparent;padding:0;position:relative;touch-action:manipulation}
.ttm-dots button::after{content:"";position:absolute;left:7px;top:7px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(27,21,48,.25);transition:transform .3s var(--ttm-spring),background .2s}
.ttm-dots button.on::after{background:#fff;transform:scale(1.5)}
@keyframes ttm-popin{from{opacity:0;transform:translateY(-16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes ttm-breathe{0%,100%{scale:1}50%{scale:1.06}}
@keyframes st-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-3px) rotate(1.5deg)}}
@keyframes st-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.1)}}
@keyframes st-wiggle{0%,100%{transform:rotate(-5deg) scale(1.08)}50%{transform:rotate(5deg) scale(1.12)}}
@keyframes st-squash{0%{transform:scale(1,1)}22%{transform:scale(.8,1.2)}55%{transform:scale(1.3,.85)}80%{transform:scale(.96,1.05)}100%{transform:scale(1,1)}}
@keyframes st-deflate{0%{transform:scale(1)}40%{transform:scale(.72,.8)}100%{transform:scale(1)}}
@keyframes tray-in{from{opacity:0;transform:translateY(22px) scale(.3) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes fx-burst{0%{opacity:1;transform:scale(.15) rotate(0)}35%{opacity:1;transform:scale(1.05) rotate(8deg)}100%{opacity:0;transform:scale(1.3) rotate(14deg)}}
@keyframes fx-lines{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}
@keyframes fx-word{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(0)}16%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.3)}28%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,calc(-50% - 64px)) rotate(-8deg) scale(1)}}
@keyframes fx-combo{0%{opacity:0;transform:translate(-50%,-50%) rotate(6deg) scale(0)}20%{opacity:1;transform:translate(-50%,-50%) rotate(6deg) scale(1.35)}35%{transform:translate(-50%,-50%) rotate(6deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,calc(-50% - 22px)) rotate(6deg) scale(1)}}
@keyframes fx-roll{from{transform:translateY(0)}to{transform:translateY(-1.25em)}}
@keyframes fx-shake{0%,100%{transform:translate(0,0)}15%{transform:translate(-4px,2px)}30%{transform:translate(4px,-3px)}45%{transform:translate(-3px,-2px)}60%{transform:translate(3px,3px)}75%{transform:translate(-2px,1px)}}
@keyframes fx-slam{0%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(3.4)}55%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(.9)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}}
@keyframes fx-thanks{0%{opacity:0;transform:translateY(24px) scale(.2) rotate(-20deg)}25%{opacity:1;transform:translateY(-34px) scale(1.25) rotate(6deg)}45%{transform:translateY(-30px) scale(1) rotate(0) }75%{opacity:1;transform:translateY(-34px) scale(1) rotate(0) }100%{opacity:0;transform:translateY(-64px) scale(.9)}}
@keyframes fx-twinkle{0%,100%{transform:scale(.6) rotate(0)}50%{transform:scale(1.15) rotate(30deg)}}

@media(prefers-reduced-motion:reduce){
  .ttm-rv{opacity:1!important;transform:none!important}
  .ttm-fab{animation:none!important}
  .rx-sheet{transition:none!important}.ttm-rx .ttm-rxb.is-nope .st{animation:none!important}.st,.st-eyes,.st.squash,.st.deflate,.tray-b,.fx-shake,.fx-stamp,.ttm-fab::before,.ttm-fab::after{animation:none!important}
  .st-eye-r{transition:none}
  .fx-layer,.fx-combo{display:none!important}
  .nroll>span{animation:none!important}
}