/* Community feeds. Uses the site's colour variables (dark default, light optional). */

.fd-main{padding:26px 0 60px; min-height:70vh; background:var(--paper);}
.fd-wrap{width:min(680px,100% - 32px); margin-inline:auto;}
.fd-title{font:800 26px/1.2 'Sora',sans-serif; letter-spacing:0; margin:0 0 14px; color:var(--navy);}
html[lang="ar"] .fd-title,html[lang="ja"] .fd-title{font-family:inherit;}

/* feed tabs: filter chips, always pinned under the section row (they follow it up when the top bar hides) */
.fd-tabs{display:flex; gap:8px; padding:12px 0; margin:0 0 6px; overflow-x:auto; scrollbar-width:none; position:sticky; top:var(--fd-top,132px); z-index:20; background:var(--paper); transition:top .28s ease;}
.fd-tabs::-webkit-scrollbar{display:none;}
html.nav-instant .fd-tabs{transition:none;}
html.nav-hidden .fd-tabs{--fd-top:52px;}
.fd-tab{flex:none; padding:9px 20px; border-radius:999px; border:1px solid var(--border-soft); background:var(--white); font:700 13.5px/1 'Inter',sans-serif; color:var(--navy-soft); text-decoration:none; white-space:nowrap; transition:background .15s,color .15s,border-color .15s;}
html[lang="ar"] .fd-tab,html[lang="ja"] .fd-tab{font-family:inherit;}
.fd-tab:hover{color:var(--navy); border-color:var(--blue);}
.fd-tab.is-on{background:var(--blue); border-color:var(--blue); color:#fff;}
.fd-tab:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
@media (max-width:720px){ .fd-tabs{--fd-top:60px; gap:6px;} html.nav-hidden .fd-tabs{--fd-top:0px;} .fd-tab{flex:1; text-align:center; padding:10px 8px;} .fd-main{padding-top:0;} }
@media (min-width:721px){ .fd-main{padding-top:0;} }

/* states */
.fd-state{text-align:center; padding:36px 16px; color:var(--navy-soft); display:flex; flex-direction:column; align-items:center; gap:14px;}
.fd-state[hidden],.fd-more[hidden],.fd-loading[hidden]{display:none;}
.fd-state .btn{margin-inline:4px;}
.fd-more{text-align:center; padding:8px 0;}
.fd-loading{display:flex; justify-content:center; padding:22px;}
.fd-spin{width:26px; height:26px; border-radius:50%; border:3px solid var(--border-soft); border-top-color:var(--blue); animation:fdspin .8s linear infinite;}
@keyframes fdspin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .fd-spin{animation-duration:2.4s;} }

/* post card */
.fd-feed{display:flex; flex-direction:column; gap:14px;}
.fp{background:var(--white); border:1px solid var(--border-soft); border-radius:16px; padding:14px 14px 8px; overflow:visible; min-width:0;}
.fp-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.fp-av{position:relative; width:42px; height:42px; border-radius:50%; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; font:700 17px/1 'Sora',sans-serif; overflow:hidden; flex:none;}
.fp-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.fp-who{min-width:0; display:flex; flex-direction:column; gap:2px; flex:1;}
.fp-who b{font:700 15px/1.25 'Inter',sans-serif; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fp-who span{font-size:12.5px; color:var(--navy-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:start;}
html[dir="rtl"] .fp-who span{direction:rtl;}
.fp-badge{font:700 11px/1 'JetBrains Mono',monospace; letter-spacing:.5px; text-transform:uppercase; padding:6px 9px; border-radius:999px; background:var(--mint-tint); color:var(--teal); flex:none;}
.fp-event{font-size:12.5px; font-weight:600; color:var(--blue-dark); background:var(--blue-tint); border-radius:10px; padding:6px 10px; margin-bottom:10px;}

.fp-content{position:relative;}
.fp-body{white-space:pre-wrap; overflow-wrap:anywhere; font:400 15.5px/1.6 'Inter',sans-serif; color:var(--navy); margin-bottom:10px;}
html[lang="ar"] .fp-body{font-family:'Noto Sans Arabic','Inter',sans-serif; line-height:1.8;}
html[lang="ja"] .fp-body{font-family:'Noto Sans JP','Inter',sans-serif;}
.fp-body.is-colored{color:#fff; font:700 21px/1.5 'Inter',sans-serif; text-align:center; padding:34px 20px; border-radius:14px; min-height:150px; display:flex; align-items:center; justify-content:center;}
.fp-tag{color:var(--blue-dark); font-weight:600;}
.fp-ment{color:var(--teal-dark); font-weight:600;}
.fp-body.is-colored .fp-tag,.fp-body.is-colored .fp-ment{color:#fff; text-decoration:underline; text-underline-offset:3px;}

/* spoiler */
.fp-content.is-spoiler > :not(.fp-reveal){filter:blur(18px); pointer-events:none; user-select:none;}
.fp-reveal{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:rgba(14,27,46,.35); border:0; border-radius:12px; color:#fff; cursor:pointer; font:inherit;}
.fp-reveal span{font:700 15px/1.2 'Inter',sans-serif;}
.fp-reveal small{font-size:12.5px; opacity:.85;}
.fp-reveal:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.fp-content.is-spoiler.is-shown > :not(.fp-reveal){filter:none; pointer-events:auto; user-select:auto;}
.fp-content.is-spoiler.is-shown .fp-reveal{display:none;}
.fp-content.is-spoiler{min-height:96px;}

/* photos */
.fp-photos{display:grid; gap:3px; border-radius:14px; overflow:hidden; margin-bottom:10px;}
.fp-ph{position:relative; padding:0; border:0; background:var(--blue-tint); cursor:zoom-in; overflow:hidden; display:block; width:100%;}
.fp-ph img{display:block; width:100%; height:100%; object-fit:cover;}
.fp-ph.is-broken{min-height:120px;}
.fp-photos.pg-1 .fp-ph{max-height:560px; aspect-ratio:4/3;}
.fp-photos.pg-1 .fp-ph img{object-fit:contain; background:#000;}
.fp-photos.pg-2{grid-template-columns:1fr 1fr; aspect-ratio:2/1.2;}
.fp-photos.pg-3{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:1.4;}
.fp-photos.pg-3 .fp-ph:first-child{grid-row:1 / 3;}
.fp-photos.pg-4{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:1.4;}
.fp-more{position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55); color:#fff; font:700 26px/1 'Inter',sans-serif;}
.fp-hidden-photo{display:none;}

/* gif / video / youtube */
.fp-gif{position:relative; border-radius:14px; overflow:hidden; margin-bottom:10px; background:var(--blue-tint);}
.fp-gif img{display:block; width:100%; max-height:520px; object-fit:contain;}
.fp-gif-tag{position:absolute; inset-inline-start:10px; top:10px; background:rgba(0,0,0,.6); color:#fff; font:700 11px/1 'JetBrains Mono',monospace; padding:5px 8px; border-radius:6px;}
.fp-video{position:relative; border-radius:14px; overflow:hidden; background:#000; margin-bottom:10px; width:100%;}
.fp-video img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.fp-video video,.fp-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000;}
.fp-play{position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; border:0; background:rgba(0,0,0,.6); display:grid; place-items:center; cursor:pointer; transition:transform .15s,background .15s;}
.fp-play:hover{transform:scale(1.06); background:rgba(0,0,0,.78);}
.fp-play svg{width:30px; height:30px; fill:#fff;}
html[dir="rtl"] .fp-play svg{transform:none;}
.fp-play:focus-visible{outline:2px solid #fff; outline-offset:3px;}
.fp-dur{position:absolute; inset-inline-end:10px; bottom:10px; background:rgba(0,0,0,.7); color:#fff; font:600 12px/1 'JetBrains Mono',monospace; padding:5px 7px; border-radius:6px;}

/* poll */
.fp-poll{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.fp-opt{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:start; padding:12px 14px; border:1.5px solid var(--border-soft); border-radius:12px; background:transparent; color:var(--navy); font:600 14.5px/1.3 'Inter',sans-serif; cursor:pointer; overflow:hidden; transition:border-color .15s,background .15s;}
button.fp-opt:hover{border-color:var(--blue); background:var(--blue-tint);}
button.fp-opt:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
button.fp-opt:disabled{opacity:.6; cursor:wait;}
.fp-opt.is-result{cursor:default;}
.fp-bar{position:absolute; inset-block:0; inset-inline-start:0; background:var(--blue-tint); z-index:0; transition:width .4s ease;}
.fp-opt.is-mine{border-color:var(--blue);}
.fp-opt.is-mine .fp-bar{background:color-mix(in srgb, var(--blue) 28%, transparent);}
.fp-opt-t,.fp-pct{position:relative; z-index:1;}
.fp-opt-t{overflow-wrap:anywhere;}
.fp-opt-t i{font-style:normal; color:var(--blue); margin-inline-start:4px;}
.fp-pct{font:700 13px/1 'JetBrains Mono',monospace; color:var(--navy-soft);}
.fp-poll-foot{font-size:12.5px; color:var(--navy-soft);}

/* shared user / anime / manga */
.fp-share{display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--border-soft); border-radius:14px; background:var(--paper); margin-bottom:10px;}
.fp-share b{display:block; font:700 15px/1.3 'Inter',sans-serif; color:var(--navy); overflow-wrap:anywhere;}
.fp-share span.fp-kind{display:inline-block; font:700 10.5px/1 'JetBrains Mono',monospace; letter-spacing:.6px; text-transform:uppercase; color:var(--blue-dark); margin-bottom:5px;}
.fp-share div > span:not(.fp-kind){font-size:12.5px; color:var(--navy-soft);}
.fp-share small{display:block; font-size:12.5px; color:var(--navy-soft); margin-top:3px;}
.fp-share-user .fp-av{width:52px; height:52px;}
.fp-cover{width:62px; flex:none; aspect-ratio:2/3; border-radius:8px; overflow:hidden;}
.fp-cover .hm-ph{width:100%; height:100%;}

/* footer: reactions */
.fp-foot{border-top:1px solid var(--border-soft); margin-top:4px; padding-top:6px;}
.fp-stats{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px; font-size:13px; color:var(--navy-soft);}
.fp-rsum{display:inline-flex; align-items:center; gap:8px;}
.fp-rsum[hidden]{display:none;}
.fp-rsum b{font-weight:600;}
.fp-rstack{display:inline-flex;}
.fp-rstack .rx + .rx{margin-inline-start:-6px;}
.fp-actions{display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; padding:4px 0 2px;}
.fp-actions > .fp-btn{justify-content:center; min-width:0;}
.fp-actions .fp-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fp-react{position:relative; display:flex; align-items:center; border-radius:12px; min-width:0;}
.fp-react .fp-like{flex:1; justify-content:center; min-width:0;}
.fp-btn{display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:0; background:transparent; color:var(--navy-soft); font:700 14px/1 'Inter',sans-serif; border-radius:12px; cursor:pointer; transition:background .15s,color .15s;}
.fp-btn svg{width:20px; height:20px;}
.fp-actions .fp-btn{background:color-mix(in srgb, var(--navy) 6%, transparent);}
.fp-btn:hover{background:var(--blue-tint); color:var(--navy);}
.fp-btn:focus-visible{outline:2px solid var(--blue); outline-offset:1px;}
.fp-btn.is-on{color:var(--blue-dark);}
.fp-btn:disabled{opacity:.55; cursor:wait;}
.fp-more-react{padding:9px 6px; border-radius:10px;}
.fp-more-react svg{width:16px; height:16px;}
.fp-picker{position:absolute; inset-inline-start:0; bottom:calc(100% + 6px); z-index:30; display:flex; gap:4px; padding:7px; background:var(--white); border:1px solid var(--border-soft); border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.28);}
.fp-picker[hidden]{display:none;}
.fp-pick{border:0; background:transparent; padding:3px; border-radius:50%; cursor:pointer; transition:transform .12s;}
.fp-pick:hover,.fp-pick:focus-visible{transform:translateY(-4px) scale(1.14);}
.fp-pick:focus-visible{outline:2px solid var(--blue);}
.fp-pick.is-on{box-shadow:0 0 0 2px var(--blue); }

/* The reaction pictures sit on the same oval the app draws (ReactionBackgroundDrawable): a radial colour that
 * darkens toward the edge, a soft shadow low on the right, a light arc on the upper left and a thin dark rim. */
.rx{--s:24px; --rx:#F7B928; --rxd:color-mix(in srgb, var(--rx) 40%, rgb(38 20 10) 60%);
    position:relative; display:inline-grid; place-items:center; flex:none; width:var(--s); height:var(--s); border-radius:50%;
    background:radial-gradient(circle closest-side, var(--rx) 44%, var(--rxd) 110%);
    box-shadow:inset 0 0 0 calc(var(--s) * .03) rgb(38 20 10 / .55); line-height:1;}
.rx::before{content:""; position:absolute; z-index:0; left:20%; right:12%; top:68%; height:42%; border-radius:50%;
    background:radial-gradient(closest-side, rgb(38 20 10 / .29), transparent); pointer-events:none;}
.rx::after{content:""; position:absolute; z-index:0; inset:6.5%; border-radius:50%; pointer-events:none;
    background:conic-gradient(from 0deg, rgb(255 255 255 / .92) 0deg, rgb(255 214 150 / .82) 49deg, transparent 70deg, transparent 290deg, rgb(255 214 150 / .82) 311deg, rgb(255 255 255 / .92) 360deg);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 14%), #000 calc(100% - 14%)); mask:radial-gradient(farthest-side, transparent calc(100% - 14%), #000 calc(100% - 14%));}
.rx img,.rx .rx-e{position:relative; z-index:1;}
.rx img{width:90%; height:90%; object-fit:contain; display:block;}
.rx-1 img,.rx-2 img{width:84%; height:84%;}
.rx-3 img{width:76%; height:76%;}
.rx-5 img{width:78%; height:78%;}
.rx .rx-e{display:none; font-size:calc(var(--s) * .55); line-height:1;}
.rx.no-img .rx-e{display:block;}
.rx.sm{--s:20px; margin:0;}
.fp-rstack .rx{box-shadow:inset 0 0 0 calc(var(--s) * .03) rgb(38 20 10 / .55), 0 0 0 2px var(--white);}
.rx.md{--s:26px;}
.rx.lg{--s:40px;}
/* the app's reaction colours (colors.xml) */
.rx-1,.rb-1{--rx:#1877F2;--rxt:#fff;} .rx-2,.rb-2{--rx:#E0495D;--rxt:#fff;} .rx-3,.rb-3{--rx:#FFDB4D;--rxt:#3a2a00;} .rx-4,.rb-4{--rx:#1AC6FF;--rxt:#032a38;}
.rx-5,.rb-5{--rx:#669999;--rxt:#fff;} .rx-6,.rb-6{--rx:#996633;--rxt:#fff;} .rx-7,.rb-7{--rx:#E0495D;--rxt:#fff;} .rx-8,.rb-8{--rx:#FF9966;--rxt:#3a1800;}
/* default Like: just the icon, no oval, in the text colour */
.rx-plain{width:22px; height:22px; flex:none; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat;}
/* reacted: the whole button takes the reaction colour */
.fp-actions .fp-like.is-on{background:var(--rx); color:var(--rxt);}
.fp-actions .fp-like.is-on:hover{background:color-mix(in srgb, var(--rx) 88%, #000); color:var(--rxt);}

/* lightbox */
.fd-lb{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center;}
.fd-lb img{max-width:min(96vw,1400px); max-height:92vh; object-fit:contain;}
.fd-lb button{position:absolute; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; cursor:pointer;}
.fd-lb button:hover{background:rgba(255,255,255,.26);}
.fd-lb button:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.fd-lb svg{width:22px; height:22px;}
.fd-lb .lb-x{top:16px; inset-inline-end:16px;}
.fd-lb .lb-p{inset-inline-start:14px; top:50%; margin-top:-23px;}
.fd-lb .lb-n{inset-inline-end:14px; top:50%; margin-top:-23px;}
html[dir="rtl"] .fd-lb .lb-p svg,html[dir="rtl"] .fd-lb .lb-n svg{transform:scaleX(-1);}

/* footer bar used on this page (same as the account pages) */
.auth-foot{border-top:1px solid var(--border-soft); background:var(--white);}
.auth-foot-in{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:18px; font-size:13.5px; flex-wrap:wrap;}
.auth-foot-links{display:inline-flex; gap:18px;}
.auth-foot a{color:var(--navy-soft); text-decoration:none;}
.auth-foot a:hover{color:var(--navy);}

@media (max-width:480px){
  .fp{padding:12px 12px 6px; border-radius:14px;}
  .fp-body{font-size:15px;}
  .fp-body.is-colored{font-size:18px; padding:26px 16px;}
}

/* small message at the bottom of the screen */
.fd-toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; z-index:300; max-width:min(92vw,420px); background:#0E1B2E; color:#fff; padding:12px 18px; border-radius:12px; font:600 14px/1.4 'Inter',sans-serif; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:opacity .25s, transform .25s; text-align:center;}
.fd-toast.is-in{opacity:1; transform:translate(-50%,0);}

@media (max-width:520px){
  .fp-actions{grid-template-columns:1fr 1fr 1fr; gap:4px;}
  .fp-actions .fp-btn{gap:5px; padding:9px 7px; font-size:12.5px;}
  .fp-actions .fp-btn svg{width:18px; height:18px;}
  .fp-actions{position:relative;}
  .fp-react{position:static;}
  .fp-picker{inset-inline:0; justify-content:space-between; gap:0; padding:6px;}
  .fp-picker .rx.lg{--s:clamp(24px, 7.8vw, 34px);}
}
@media (max-width:400px){
  .fp-actions{gap:3px;}
  .fp-actions .fp-btn{gap:4px; padding:9px 4px; font-size:12px;}
  .fp-actions .fp-btn svg{width:16px; height:16px;}
  .fp-actions .fp-btn .rx.md{--s:22px;}
}