/* Diseño público compartido: navegación, formularios base y pie. */
/* Base pública compartida: navegación, registro y elementos comunes.
   The admin area is intentionally styled by admin.css, not this file. */
:root {
    --social-ink:#171b28;
    --social-muted:#687386;
    --social-line:#e8ebf1;
    --social-surface:#fff;
    --social-wash:#f7f8fb;
    --social-violet:#6658f5;
    --social-shadow:0 20px 60px rgba(25,28,55,.06)
}

body.public-body {
    font-size:16px;
    line-height:1.5;
    background:#fafbfe;
    color:var(--social-ink);
    overflow-x:hidden
}

body.public-body::before {
    content:"";
    position:fixed;
    left:-130px;
    top:140px;
    width:340px;
    height:340px;
    background:radial-gradient(circle,rgba(109,98,244,.075),transparent 70%);
    pointer-events:none;
    z-index:-1
}

body.public-body a,body.public-body button {
    -webkit-tap-highlight-color:transparent
}

body.public-body .site-shell {
    min-height:100vh;
    display:flex;
    flex-direction:column
}

body.public-body .site-main {
    flex:1;
    min-width:0;
    padding:0 18px 80px
}

body.public-body .site-header {
    height:72px;
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid #eef0f5;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px)
}

body.public-body .site-header-inner {
    height:100%;
    max-width:1100px;
    margin:auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px
}

body.public-body .site-brand {
    display:flex;
    align-items:center;
    flex-shrink:0
}

body.public-body .site-brand img {
    width:142px;
    height:auto;
    max-height:45px;
    object-fit:contain
}

body.public-body .site-nav {
    margin-left:auto
}

body.public-body .site-nav a {
    font-size:15px;
    font-weight:750;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#414b61
}

body.public-body .site-header-cta {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:14px;
    font-weight:750;
    border-radius:100px;
    padding:10px 17px;
    background:#f3f4fc;
    color:#3b4370
}

body.public-body .site-header-cta:hover {
    background:#e8e9fc
}

body.public-body .site-footer {
    background:none;
    border:0;
    max-width:none;
    padding:25px 20px 32px;
    font-size:13px;
    color:#8790a0;
    text-align:center
}

body.public-body .site-footer a {
    font-weight:700;
    color:#67738b
}

/* Shared public utilities */
.social-wrap,.social-home,.social-event {
    width:min(100%,1120px);
    margin-inline:auto
}

.social-breadcrumb,.social-breadcrumb a {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#6c7688;
    font-size:15px;
    font-weight:650
}

.social-breadcrumb {
    margin:25px 0 20px
}

.social-breadcrumb:hover,.social-breadcrumb a:hover {
    color:#3e41af
}

.social-breadcrumb i {
    font-size:14px
}

.social-section-kicker {
    font-size:13px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:#777fa1;
    font-weight:850;
    display:inline-flex;
    align-items:center;
    gap:8px
}

.social-section-kicker i {
    font-size:8px;
    color:#7569ec
}

.social-empty {
    text-align:center;
    margin:40px auto;
    max-width:500px;
    padding:60px 25px;
    border:1px dashed #dce1ec;
    border-radius:24px;
    background:#fff
}

.social-empty>i {
    display:block;
    font-size:34px;
    color:#acb5ca;
    margin-bottom:18px
}

.social-empty h1,.social-empty h2,.social-empty h3 {
    font-size:25px;
    margin:0 0 10px;
    letter-spacing:-.04em
}

.social-empty p {
    color:#758092;
    font-size:16px;
    margin-bottom:22px
}

.social-empty a {
    background:var(--contest-btn,#645ef3);
    color:var(--contest-on-btn,#fff);
    display:inline-flex;
    padding:12px 20px;
    border-radius:100px;
    font-weight:750
}

/* Profile: a true vertical social post rather than a real-estate detail card. */
.social-profile-wrap {
    max-width:548px
}

.social-profile-wrap .social-breadcrumb {
    margin:20px 0 16px
}

.social-post {
    background:#fff;
    border:1px solid var(--social-line);
    border-radius:19px;
    overflow:hidden;
    box-shadow:0 18px 70px rgba(22,31,67,.065);
    isolation:isolate
}

.post-top {
    height:76px;
    padding:12px 18px;
    display:flex;
    align-items:center;
    gap:12px
}

.post-avatar {
    background:linear-gradient(145deg,var(--contest-btn,#7b65f5),#e59bb8);
    color:#fff;
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    flex-shrink:0;
    border-radius:50%;
    box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(125,106,245,.23);
    font-size:18px
}

.post-author {
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.32;
    gap:3px
}

.post-author strong {
    font-size:16px;
    color:#1a2231;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.post-author>a {
    font-size:14px;
    color:#7b8494;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.post-number {
    margin-left:auto;
    font-size:13px;
    color:#8f9aad;
    font-weight:750;
    padding:7px 11px;
    border-radius:100px;
    background:#f6f7fb
}

.post-media {
    position:relative;
    background:#eef0f8;
    aspect-ratio:4/5;
    width:100%;
    max-height:760px;
    overflow:hidden;
    isolation:isolate
}

.post-media>img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

.photo-corner {
    position:absolute;
    bottom:15px;
    left:15px;
    background:rgba(12,15,23,.53);
    color:white;
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.18);
    padding:7px 12px;
    border-radius:100px;
    font-size:13px;
    font-weight:730;
    display:flex;
    align-items:center;
    gap:7px
}

.post-heart-burst {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(0);
    font-size:90px;
    color:#fff;
    filter:drop-shadow(0 9px 12px #b03d7269);
    opacity:0;
    pointer-events:none
}

.post-heart-burst.is-burst {
    animation:big-heart .85s cubic-bezier(.2,.8,.2,1) forwards
}

.post-bottom {
    padding:11px 20px 19px
}

.post-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    min-height:57px
}

.post-action-group {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap
}

.post-action,.post-save {
    font:inherit;
    border:0;
    background:transparent;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:12px;
    color:#222938;
    padding:10px 12px;
    transition:background .2s,transform .23s;
    color-mix(in srgb, #000 80%, #fff)
}

.post-action {
    font-size:15px;
    font-weight:740;
    white-space:nowrap
}

.post-action i {
    font-size:23px;
    color:#293047;
    transition:transform .28s, color .2s
}

.post-action:hover,.post-save:hover {
    background:#f3f5fa;
    transform:translateY(-2px)
}

.post-action:active,.post-save:active {
    transform:scale(.91)
}

.post-action:focus-visible,.post-save:focus-visible {
    outline:3px solid #8b7afc;
    outline-offset:2px
}

.post-action.vote-action {
    color:var(--contest-btn,#6658f5)
}

.post-action.vote-action i {
    color:var(--contest-btn,#6658f5)
}

.post-action.like-action.is-liked,.post-action.like-action.is-liked i {
    color:#f24f78
}

.post-action.like-action.is-popping i {
    animation:heart-pop .55s cubic-bezier(.2,1,.3,1)
}

.post-action.done-action {
    color:#239466;
    cursor:default
}

.post-action.done-action i {
    color:#239466
}

.post-action.inactive-action {
    color:#8f98a7;
    cursor:default
}

.post-action.inactive-action i {
    color:#a6aeb9
}

.post-save {
    width:46px;
    height:46px;
    font-size:25px
}

.post-save i {
    color:#26aa79
}

.post-totals {
    display:flex;
    align-items:center;
    gap:9px;
    color:#40495a;
    font-size:14px;
    margin:8px 1px 12px
}

.post-totals strong {
    font-weight:800
}

.post-separator {
    color:#b8c0cd
}

.post-caption {
    font-size:16px;
    line-height:1.55;
    color:#333c4c;
    overflow-wrap:anywhere
}

.post-caption strong {
    color:#182030;
    font-weight:800
}

.post-caption span {
    color:#4f596b
}

.post-more {
    display:inline-flex;
    gap:8px;
    align-items:center;
    margin-top:15px;
    font-size:14px;
    font-weight:750;
    color:#7d87a0
}

.post-more:hover {
    color:var(--contest-btn,#6658f5)
}

.social-under-post {
    margin:18px auto;
    display:flex;
    justify-content:center
}

.social-under-post a {
    font-size:14px;
    font-weight:700;
    color:#717c90;
    padding:11px 15px;
    display:flex;
    gap:9px;
    align-items:center
}

/* Voting: bottom sheet on phones, modal on desktop */
.vote-sheet[hidden] {
    display:none!important
}

.vote-sheet {
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-items:center;
    pointer-events:auto
}

.vote-sheet-backdrop {
    position:absolute;
    inset:0;
    background:rgba(17,24,39,.54);
    backdrop-filter:blur(6px);
    animation:backdrop-in .23s both
}

.vote-sheet-content {
    position:relative;
    z-index:1;
    background:white;
    border-radius:26px;
    padding:30px 30px 28px;
    width:min(100% - 32px,440px);
    text-align:center;
    box-shadow:0 25px 90px rgba(12,16,41,.2);
    animation:sheet-rise .42s cubic-bezier(.2,.95,.2,1.05) both
}

.sheet-close {
    position:absolute;
    top:16px;
    right:16px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#f3f5f9;
    color:#4a566a
}

.sheet-icon {
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    border-radius:22px;
    background:#f1eeff;
    color:var(--contest-btn,#6658f5);
    font-size:27px;
    margin:0 auto 17px
}

.vote-sheet-content h2 {
    font-size:clamp(23px,5vw,28px);
    line-height:1.18;
    letter-spacing:-.04em;
    margin:0 0 8px
}

.vote-sheet-content p {
    margin:0 0 20px;
    font-size:16px;
    color:#778195
}

.vote-sheet-content .turnstile-wrap {
    display:flex;
    justify-content:center;
    margin-bottom:20px;
    min-height:66px
}

.vote-sheet-submit {
    border:0;
    border-radius:14px;
    background:var(--contest-btn,#6658f5);
    color:var(--contest-on-btn,#fff);
    font-size:16px;
    font-weight:850;
    min-height:54px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:filter .2s,transform .2s
}

.vote-sheet-submit:hover {
    filter:brightness(.94);
    transform:translateY(-2px)
}

.vote-sheet-submit:disabled {
    opacity:.6;
    transform:none
}

.vote-sheet-submit i {
    font-size:18px
}

body.vote-dialog-open {
    overflow:hidden
}

/* Floating celebratory particles */
.social-particle {
    position:fixed;
    z-index:1100;
    pointer-events:none;
    color:var(--particle-color,#f45b90);
    font-size:var(--particle-size,17px);
    left:var(--particle-x,50%);
    top:var(--particle-y,50%);
    opacity:0;
    animation:particle-fly 1.18s cubic-bezier(.11,.63,.25,1) forwards;
    filter:drop-shadow(0 2px 2px rgba(20,20,40,.1))
}

/* Contests & social grid */
.social-event {
    max-width:1050px;
    padding-top:24px
}

.event-cover-card {
    border-radius:25px;
    position:relative;
    overflow:hidden;
    min-height:310px;
    background:#25263c;
    color:white;
    isolation:isolate;
    display:flex;
    align-items:end
}

.event-cover-photo {
    position:absolute;
    inset:0;
    z-index:-2
}

.event-cover-photo img {
    height:100%;
    width:100%;
    object-fit:cover
}

.event-cover-card::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(13,17,31,.86),rgba(14,19,36,.32) 85%);
    z-index:-1
}

.event-cover-content {
    padding:40px 44px;
    max-width:750px
}

.event-live {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.17);
    border:1px solid #ffffff47;
    border-radius:100px;
    padding:7px 13px;
    font-size:13px;
    font-weight:800;
    backdrop-filter:blur(14px)
}

.event-live i {
    font-size:8px;
    color:#7bf1ae
}

.event-cover-content h1 {
    font-size:clamp(30px,4.3vw,53px);
    font-weight:850;
    line-height:1.08;
    letter-spacing:-.045em;
    margin:15px 0 9px;
    overflow-wrap:anywhere
}

.event-cover-content p {
    font-size:16px;
    line-height:1.55;
    color:#e5e8f2;
    max-width:530px;
    margin:0 0 22px
}

.event-cover-buttons {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px
}

.event-cover-buttons a,.event-cover-buttons button {
    border:0;
    border-radius:100px;
    padding:12px 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font:inherit;
    font-size:15px;
    font-weight:800;
    min-height:46px
}

.event-join {
    background:var(--contest-btn,#6858eb);
    color:var(--contest-on-btn,#fff)
}

.event-share {
    color:white;
    background:rgba(255,255,255,.16);
    border:1px solid #ffffff61!important;
    backdrop-filter:blur(10px)
}

.event-cover-buttons a:hover,.event-cover-buttons button:hover {
    transform:translateY(-2px);
    filter:brightness(1.06)
}

.event-overview {
    display:flex;
    gap:20px;
    align-items:center;
    padding:17px 3px;
    font-size:15px;
    color:#697488
}

.event-overview span {
    display:inline-flex;
    align-items:center;
    gap:8px
}

.event-overview i {
    color:#7b72c1
}

.social-gallery {
    padding-top:23px
}

.social-gallery-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:15px;
    margin-bottom:21px
}

.social-gallery-head h2 {
    font-size:clamp(27px,4vw,37px);
    margin:6px 0 3px;
    letter-spacing:-.05em
}

.social-gallery-head p {
    margin:0;
    color:#778296;
    font-size:16px
}

.social-gallery-plus {
    display:inline-flex;
    align-items:center;
    gap:9px;
    border-radius:100px;
    padding:11px 17px;
    background:var(--contest-btn,#6658f5);
    color:var(--contest-on-btn,#fff);
    font-size:15px;
    font-weight:820;
    flex-shrink:0
}

.social-gallery-plus:hover {
    filter:brightness(.96)
}

.social-search {
    display:flex;
    align-items:center;
    gap:11px;
    background:white;
    border:1px solid #e4e8f0;
    border-radius:15px;
    padding:7px 8px 7px 17px;
    max-width:520px;
    margin-bottom:26px;
    box-shadow:0 5px 15px rgba(25,33,57,.025)
}

.social-search>i {
    font-size:17px;
    color:#919bab
}

.social-search input {
    min-height:36px;
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    font-size:16px;
    background:none;
    color:#252d41
}

.social-search input::placeholder {
    color:#8b94a7
}

.social-search button {
    border:0;
    background:#f3f5fb;
    border-radius:10px;
    padding:9px 14px;
    font-size:14px;
    font-weight:750;
    color:#52617b
}

.social-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:19px
}

.social-tile {
    background:white;
    border:1px solid #edf0f4;
    overflow:hidden;
    border-radius:18px;
    min-width:0;
    box-shadow:0 5px 20px rgba(19,28,54,.025);
    transition:transform .3s,box-shadow .3s
}

.social-tile:hover {
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(23,29,58,.11)
}

.social-tile-photo {
    display:block;
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:#f0f2f6
}

.social-tile-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.18,.7,.14,1)
}

.social-tile:hover .social-tile-photo img {
    transform:scale(1.065)
}

.social-photo-arrow {
    position:absolute;
    right:13px;
    top:13px;
    color:white;
    background:#1a1e297a;
    border:1px solid #ffffff45;
    border-radius:50%;
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    backdrop-filter:blur(9px);
    font-size:13px;
    opacity:0;
    transform:translateY(7px);
    transition:.24s
}

.social-tile:hover .social-photo-arrow,.social-tile:focus-within .social-photo-arrow {
    opacity:1;
    transform:none
}

.social-tile-info {
    padding:14px 14px 12px
}

.social-tile-caption {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:9px;
    margin-bottom:9px
}

.social-tile-name {
    font-weight:820;
    font-size:16px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden
}

.social-tile-caption>span {
    flex-shrink:0;
    color:#99a2b0;
    font-size:12px;
    font-weight:700
}

.social-tile-actions {
    display:flex;
    align-items:center;
    gap:15px;
    border-top:1px solid #eef0f5;
    padding-top:11px
}

.social-tile-actions>a,.social-tile-actions>button {
    font:inherit;
    font-size:14px;
    border:0;
    background:transparent;
    color:#687487;
    display:inline-flex;
    align-items:center;
    gap:7px;
    white-space:nowrap
}

.social-tile-actions i {
    font-size:18px
}

.social-tile-actions>a:first-child {
    color:var(--contest-btn,#6658f5);
    font-weight:800
}

.social-tile-actions button {
    margin-left:auto;
    padding:0
}

.social-tile-actions>a:hover,.social-tile-actions>button:hover {
    color:#463db3
}

.social-pagination {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin:34px auto;
    color:#697586;
    font-size:15px;
    font-weight:750
}

.social-pagination a {
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--social-line);
    width:43px;
    height:43px
}

.social-pagination a.is-disabled {
    opacity:.3;
    pointer-events:none
}

.social-rules {
    margin-top:36px;
    background:#fff;
    border:1px solid var(--social-line);
    border-radius:16px;
    padding:18px 22px;
    font-size:15px;
    color:#637084
}

.social-rules summary {
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-weight:750;
    color:#2a3445
}

.social-rules summary i:last-child {
    margin-left:auto
}

.social-rules>div {
    margin-top:14px;
    line-height:1.7
}

.social-winners {
    margin:23px 0;
    background:#fff;
    border:1px solid var(--social-line);
    border-radius:19px;
    padding:25px
}

.social-winners h2 {
    margin:7px 0 16px;
    font-size:26px
}

.winner-feed {
    display:flex;
    gap:12px;
    flex-wrap:wrap
}

.winner-feed-item {
    display:flex;
    align-items:center;
    gap:13px;
    padding:8px 14px 8px 8px;
    border:1px solid #efedf1;
    border-radius:14px;
    font-size:16px;
    font-weight:800
}

.winner-feed-item img {
    width:66px;
    height:70px;
    object-fit:cover;
    border-radius:10px
}

.winner-feed-item i {
    color:#d8a53d
}

/* Home */
.social-home {
    max-width:1050px
}

.social-home-head {
    padding:65px 0 28px
}

.social-home-head h1 {
    font-size:clamp(38px,5vw,58px);
    font-weight:850;
    letter-spacing:-.06em;
    margin:9px 0 7px
}

.social-home-head p {
    font-size:18px;
    color:#7c879a;
    margin:0
}

.home-event-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}

.home-event {
    background:white;
    border:1px solid #edf0f4;
    border-radius:20px;
    overflow:hidden;
    min-width:0;
    box-shadow:0 7px 25px rgba(20,30,60,.03);
    transition:transform .26s,box-shadow .26s
}

.home-event:hover {
    transform:translateY(-6px);
    box-shadow:0 20px 35px #20294f18
}

.home-event-photo {
    aspect-ratio:4/3.5;
    position:relative;
    overflow:hidden;
    background:#eef0f6
}

.home-event-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s
}

.home-event:hover .home-event-photo img {
    transform:scale(1.05)
}

.home-event-tag {
    position:absolute;
    left:14px;
    top:14px;
    background:#ffffffec;
    color:#27364b;
    padding:7px 12px;
    border-radius:30px;
    font-weight:800;
    font-size:12px
}

.home-event-bottom {
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px
}

.home-event-bottom div {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0
}

.home-event-bottom strong {
    font-size:17px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.home-event-bottom span {
    color:#8490a3;
    font-size:14px
}

.home-event-bottom>i {
    background:#f4f3fc;
    border-radius:50%;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    color:#544fbb;
    flex-shrink:0
}

/* Appear by motion, not a bland global fade */
@media(prefers-reduced-motion:no-preference) {
    .social-tile,.home-event {
        animation:tile-arrive .7s cubic-bezier(.17,.88,.21,1) both
    }
    .social-tile:nth-child(4n + 2),.home-event:nth-child(4n + 2) {
        animation-delay:.09s
    }
    .social-tile:nth-child(4n + 3),.home-event:nth-child(4n + 3) {
        animation-delay:.17s
    }
    .social-tile:nth-child(4n + 4),.home-event:nth-child(4n + 4) {
        animation-delay:.22s
    }
    .post-media>img {
        animation:photo-enter .85s cubic-bezier(.22,.9,.2,1) both
    }
    .post-bottom {
        animation:controls-enter .6s cubic-bezier(.22,.9,.2,1) .15s both
    }
}

@keyframes tile-arrive {
    from {
        opacity:0;
        transform:translate3d(0,38px,0) rotate(1.3deg) scale(.95)
    }
    to {
        opacity:1;
        transform:translate3d(0,0,0) rotate(0) scale(1)
    }
}

@keyframes photo-enter {
    from {
        opacity:.65;
        transform:translateY(35px) scale(1.075)
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1)
    }
}

@keyframes controls-enter {
    from {
        opacity:0;
        transform:translateY(24px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}

@keyframes camera-float {
    0%,100% {
        transform:translateY(0) rotate(-4deg)
    }
    50% {
        transform:translateY(-8px) rotate(5deg)
    }
}

@keyframes sheet-rise {
    from {
        opacity:.6;
        transform:translateY(65px) scale(.95)
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1)
    }
}

@keyframes backdrop-in {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}

@keyframes heart-pop {
    0% {
        transform:scale(1)
    }
    40% {
        transform:scale(1.4) rotate(-16deg)
    }
    70% {
        transform:scale(.85) rotate(9deg)
    }
    100% {
        transform:scale(1)
    }
}

@keyframes big-heart {
    0% {
        opacity:0;
        transform:translate(-50%,-50%) scale(.1) rotate(-20deg)
    }
    40% {
        opacity:1;
        transform:translate(-50%,-50%) scale(1.35) rotate(9deg)
    }
    75% {
        opacity:1;
        transform:translate(-50%,-50%) scale(.95)
    }
    100% {
        opacity:0;
        transform:translate(-50%,-50%) scale(1.15)
    }
}

@keyframes particle-fly {
    0% {
        opacity:1;
        transform:translate(0,0) scale(.4) rotate(0)
    }
    15% {
        opacity:1;
        transform:translate(calc(var(--tx)*.15),-30px) scale(1.1) rotate(45deg)
    }
    100% {
        opacity:0;
        transform:translate(var(--tx),var(--ty)) scale(.6) rotate(var(--rot))
    }
}

/* Respect phone safe-areas and keep text legible across widths */
@media(max-width:900px) {
    .social-grid,.home-event-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px
    }
}

@media(max-width:640px) {
    body.public-body .site-header {
        height:61px
    }
    body.public-body .site-header-inner {
        padding:0 16px;
        gap:8px
    }
    body.public-body .site-brand img {
        width:119px
    }
    body.public-body .site-nav a {
        font-size:14px
    }
    body.public-body .site-nav a i {
        display:none
    }
    body.public-body .site-header-cta {
        display:none
    }
    body.public-body .site-main {
        padding:0 12px 65px
    }
    .social-profile-wrap {
        width:calc(100% + 24px);
        margin-left:-12px
    }
    .social-profile-wrap>.social-breadcrumb {
        margin:13px 15px
    }
    .social-profile-wrap .social-post {
        border-left:0;
        border-right:0;
        border-radius:0;
        box-shadow:none
    }
    .post-top {
        padding:11px 16px;
        height:68px
    }
    .post-media {
        max-height:none
    }
    .post-bottom {
        padding:9px 13px 17px
    }
    .post-action-group {
        gap:0
    }
    .post-action {
        padding:9px 9px;
        font-size:14px;
        gap:6px
    }
    .post-action i {
        font-size:22px
    }
    .post-save {
        width:37px;
        font-size:23px
    }
    .post-totals {
        margin:7px 2px 10px
    }
    .social-profile-wrap .social-under-post {
        margin:12px auto
    }
    .event-cover-card {
        border-radius:19px;
        min-height:315px
    }
    .event-cover-content {
        padding:24px 22px
    }
    .event-cover-card::before {
        background:linear-gradient(0deg,rgba(12,17,30,.86),rgba(12,17,30,.33))
    }
    .event-cover-content h1 {
        font-size:35px
    }
    .event-cover-content p {
        font-size:15px
    }
    .event-overview {
        font-size:13px;
        gap:12px;
        flex-wrap:wrap;
        padding:14px 2px
    }
    .social-gallery {
        padding-top:19px
    }
    .social-gallery-head h2 {
        font-size:29px
    }
    .social-gallery-head p {
        font-size:15px
    }
    .social-gallery-plus {
        width:43px;
        height:43px;
        padding:0;
        justify-content:center
    }
    .social-gallery-plus span {
        display:none
    }
    .social-search {
        margin-bottom:17px
    }
    .social-grid {
        gap:11px
    }
    .social-tile {
        border-radius:13px
    }
    .social-tile-info {
        padding:10px 9px 9px
    }
    .social-tile-name {
        font-size:14px
    }
    .social-tile-caption>span {
        font-size:11px
    }
    .social-tile-actions {
        gap:9px
    }
    .social-tile-actions>a,.social-tile-actions>button {
        font-size:12px;
        gap:4px
    }
    .social-tile-actions i {
        font-size:16px
    }
    .social-tile-actions>a:first-child span {
        display:none
    }
    .social-home-head {
        padding:35px 3px 23px
    }
    .social-home-head h1 {
        font-size:39px
    }
    .social-home-head p {
        font-size:16px
    }
    .home-event-grid {
        gap:11px
    }
    .home-event {
        border-radius:13px
    }
    .home-event-photo {
        aspect-ratio:4/4.6
    }
    .home-event-bottom {
        padding:11px
    }
    .home-event-bottom strong {
        font-size:15px
    }
    .home-event-bottom span {
        font-size:13px
    }
    .home-event-bottom>i {
        width:28px;
        height:28px;
        font-size:12px
    }
    .vote-sheet {
        align-items:end
    }
    .vote-sheet-content {
        width:100%;
        border-radius:27px 27px 0 0;
        padding:27px 22px calc(24px + env(safe-area-inset-bottom));
        animation:sheet-rise .36s cubic-bezier(.2,.95,.2,1) both
    }
    .social-winners {
        padding:18px
    }
}

@media(max-width:360px) {
    body.public-body .site-nav a {
        font-size:12px
    }
    .post-action {
        font-size:12px;
        padding:8px 7px;
        gap:4px
    }
    .post-action i {
        font-size:19px
    }
    .social-tile-actions {
        gap:8px
    }
    .social-tile-caption>span {
        display:none
    }
    .social-home-head h1 {
        font-size:34px
    }
}

@media(prefers-reduced-motion:reduce) {
    .social-particle,.post-heart-burst {
        display:none!important
    }
    .social-tile,.home-event,.post-media>img,.post-bottom {
        animation:none!important
    }
}

/* Honor the palette configured per contest. */
body.public-body.contest-body {
    background:var(--contest-bg,#fafbfe)
}

.contest-body .social-gallery-head h2,.contest-body .social-breadcrumb {
    color:var(--contest-ink,#171b28)
}


/* Social-style action strip: accessible icon-only actions under the photo. */
.post-action.vote-action>span,.post-action.like-action>span,.post-action.share-action>span {
    display:none
}

.post-action.vote-action,.post-action.like-action,.post-action.share-action {
    width:48px;
    height:48px;
    padding:9px;
    display:inline-grid;
    place-items:center
}

.post-action-group {
    gap:4px
}

@media(max-width:640px) {
    .post-action.vote-action,.post-action.like-action,.post-action.share-action {
        width:44px;
        height:44px
    }
}