/* features.css — badges, trade calculator, match alerts, 🔔 inbox, insights, donation goal bar. Uses the site's existing colour variables. */
.fonly {
    display: none
}

body[data-view=badges] #badgesView, body.isadmin[data-view=insights] #insightsView {
    display: block
}

#insightsTabBtn[hidden] {
    display: none
}

body[data-view=badges] .dexonly, body[data-view=insights] .dexonly {
    display: none !important
}

.fonly .panel, .fcalc, .fmatchalerts {
    margin-bottom: 14px;
    padding: 16px
}

.fsmall {
    font-size: 13px !important
}

.xform textarea {
    resize: vertical
}

/* donation goal bar */
/* sits inside <main class=wrap> right above the tab bar, so it spans exactly from the Pokédex tab to the Live alerts button */
.fgoalwrap {
    margin: 0 0 10px;
    padding: 0
}

.fgoal {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: linear-gradient(90deg, #15293a, #182434);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 14px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px
}

.fgoal:hover {
    border-color: var(--gold)
}

.fgtitle {
    font-weight: 700;
    white-space: nowrap
}

.fgbar {
    flex: 1 1 160px;
    height: 10px;
    background: #0b1018;
    border-radius: 99px;
    overflow: hidden;
    border: 1px solid #2a3a4f
}

.fgbar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--gold));
    border-radius: 99px;
    transition: width .6s
}

.fgnum {
    color: var(--muted);
    white-space: nowrap
}

.fgcta {
    color: var(--gold);
    font-weight: 700;
    white-space: nowrap
}

/* badges */
.fbicon {
    position: relative;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    flex: none;
    overflow: hidden;
    line-height: 1
}

.fbicon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: none;
}

.fbicon.locked {
    filter: grayscale(1) brightness(.55);
    box-shadow: 0 0 0 2px #0b1018, 0 0 0 3px #29394d
}

.fbgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px
}

.fbadge {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
    background: #0e1722;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 10px 12px;
    color: var(--text);
    font: inherit;
    cursor: pointer
}

.fbadge:hover {
    border-color: var(--cyan)
}

.fbadge.got {
    border-color: #5a7d3c;
    background: linear-gradient(#10201a, #0e1722)
}

.fbname {
    font-size: 14px
}

.fbadge small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35
}

.fbprog {
    width: 100%;
    height: 6px;
    background: #0b1018;
    border-radius: 99px;
    overflow: hidden
}

.fbprog i {
    display: block;
    height: 100%;
    background: var(--cyan);
    border-radius: 99px
}

.fbadge.got .fbprog i {
    background: var(--green)
}

.fbnum {
    font-weight: 700
}

.fbmodal {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 8px
}

.fbmodal .xcardstats {
    width: 100%;
    text-align: left
}

.fbstrip {
    margin: 0 0 12px
}

.fbstrip small {
    display: block;
    color: var(--muted);
    margin-bottom: 6px
}

.fbstrip > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.fbmgr {
    display: grid;
    gap: 8px
}

.fbmrow {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0e1722;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 12px
}

.fbmtxt {
    flex: 1;
    display: grid;
    min-width: 0
}

.fbmtxt small {
    color: var(--muted)
}

.fbprev {
    display: grid;
    place-items: center;
    padding: 6px 0
}

.fbimg {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    gap: 10px
}

.fbimg legend {
    color: var(--muted);
    font-size: 12px;
    padding: 0 6px
}

.fbfile {
    display: inline-block
}

.fbmaker summary {
    cursor: pointer;
    color: var(--cyan);
    margin-bottom: 8px
}

.fbeditor input[type=color] {
    padding: 2px;
    height: 38px;
    width: 70px
}

/* trade calculator + match alerts */
.fmtoggle {
    align-items: center !important
}

.fmsel {
    background: #0e1722;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px
}

/* bell + inbox */
.fbell {
    position: relative;
    background: #111b27;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    width: 42px;
    height: 42px;
    font-size: 18px;
    cursor: pointer;
    margin-left: auto;
    flex: none
}

.fbell:hover {
    border-color: var(--cyan)
}

.fbell[hidden] {
    display: none
}

.fbell + .donate, .fbell + .installbtn {
    margin-left: 0
}

.fdot {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 99px;
    background: #e5484d;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid var(--bg)
}

.fdot[hidden] {
    display: none
}

.finbox {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    max-height: 46vh;
    overflow-y: auto
}

.fnrow {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    background: #0e1722;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text);
    font: inherit;
    cursor: pointer
}

.fnrow.unread {
    border-color: #287c98;
    background: #10222d
}

.fnrow:hover {
    border-color: var(--cyan)
}

.fnicon {
    font-size: 20px
}

.fntxt {
    flex: 1;
    display: grid;
    min-width: 0
}

.fntxt small {
    color: var(--muted)
}

.fntime {
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap
}

.fprefs {
    display: grid;
    gap: 8px;
    margin-top: 10px
}

/* insights */
.fitabs {
    flex-wrap: wrap
}

.fitabs button {
    padding: 9px 14px
}

.fstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px
}

.fstat {
    background: #0e1722;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    gap: 2px
}

.fstat small {
    color: var(--muted);
    font-size: 11px
}

.fstat b {
    font-size: 22px
}

.fstat em {
    font-style: normal;
    color: var(--muted);
    font-size: 11px
}

.fgrid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px
}

.fgrid2 > .panel {
    margin-bottom: 0
}

.fonly .fgrid2 {
    margin-bottom: 14px
}

.fchart {
    width: 100%;
    height: 90px;
    margin-top: 10px;
    display: block
}

.fchart rect {
    fill: var(--cyan)
}

.fchart rect:hover {
    fill: var(--gold)
}

.fchartcap {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px
}

.ftop, .fteams {
    display: grid;
    gap: 6px;
    margin-top: 10px
}

.ftop > div, .fteams > div {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #0e1722;
    overflow: hidden;
    font-size: 13px
}

.ftop i, .fteams i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(98,217,239,.2);
    z-index: 0
}

.ftop span, .ftop b, .fteams span, .fteams b {
    position: relative;
    z-index: 1
}

.frep {
    background: #0e1722;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: grid;
    gap: 6px
}

.frephead {
    display: flex;
    justify-content: space-between;
    gap: 8px
}

.frepbody {
    background: #0b1018;
    border-radius: 8px;
    padding: 8px 10px;
    word-break: break-word
}

.fmrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #1c2a3b
}

.fmrow small {
    display: block;
    color: var(--muted)
}

.fmlog {
    display: grid;
    gap: 4px;
    font-size: 13px;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 8px
}

.fuser {
    margin-top: 12px;
    display: grid;
    gap: 10px;
    background: #0e1722;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px
}

.fuserhead {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 17px
}

.fbanned {
    background: #3a1820;
    border-color: #6b2a33;
    color: var(--red)
}

.fmact {
    align-items: end
}

.fword button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 0 0 0 4px
}

.fchip.have {
    background: #163a27;
    border-color: #2f7a52;
    color: #a8f0c6
}

.fchip.miss {
    background: #3a1820;
    border-color: #6b2a33;
    color: #ffb3bd
}

.fevfeat {
    margin-top: 14px
}

.fevfeat h3 {
    margin: 0 0 6px
}

@media (max-width: 640px) {
    .fgoal {
        gap: 8px
    }

    .fgcta {
        display: none
    }
}

/* loading skeletons for the non-Pokédex tabs (same shimmer as the Pokédex cards) */
.skelgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px
}

.skelgrid .skel {
    height: 120px
}

.skelgrid.tall .skel {
    height: 170px
}

.skelgrid.badges {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
}

.skelgrid.badges .skel {
    height: 170px
}

.skelgrid.rows {
    grid-template-columns: 1fr;
    gap: 8px
}

.skelgrid.rows .skel {
    height: 52px
}

.xrow[hidden], .xform [hidden], .fbeditor [hidden] {
    display: none !important
}

/* trade cost chart: compact by default, click to enlarge */
.fcchart {
    margin-top: 6px;
    display: flex;
    justify-content: center
}

.fczoom {
    position: relative;
    display: block;
    width: 100%;
    max-width: 260px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: none;
    cursor: zoom-in;
    line-height: 0
}

.fczoom:hover {
    border-color: var(--cyan)
}

.fczoom img {
    display: block;
    width: 100%;
    height: auto
}

.fczoomhint {
    display: block;
    line-height: 1.3;
    font-size: 11px;
    color: var(--muted);
    background: #0e1722;
    border-top: 1px solid var(--line);
    padding: 4px 8px;
    text-align: center
}

.xmodal.fzoom {
    width: min(1140px, 96vw);
    padding: 10px;
    cursor: zoom-out
}

.fczoomimg {
    display: block;
    max-width: 100%;
    max-height: 86vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 8px
}

.fcalc .xhead {
    margin-bottom: 0
}

.fcalc {
    padding: 12px 14px !important
}

/* Seasonal themes */
body.season-winter {
    --cyan: #7dd3fc;
}

body.season-winter::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at top, rgba(125,211,252,.06), transparent 60%);
    z-index: -1;
}

body.season-halloween {
    --cyan: #fb923c;
}

body.season-halloween::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at bottom, rgba(251,146,60,.07), transparent 55%);
    z-index: -1;
}

body.season-spring {
    --cyan: #86efac;
}

body.season-summer {
    --cyan: #fbbf24;
}

/* Compact match picks */
.matchpicks .xbtn {
    font-size: 13px;
    padding: 6px 10px;
}

/* Profile badge art — no circular rings */
.profileHolder .fbicon, #spBadges .fbicon, .fbstrip .fbicon {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-grid;
    place-items: center;
}

.profileHolder .fbicon img, #spBadges .fbicon img, .fbstrip .fbicon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0 !important;
    border: none !important;
}

.profileHolder .fbicon b, #spBadges .fbicon b {
    display: none;
}

/* hide emoji fallback when image present */
.profileHolder .fbicon:not(:has(img)) b, #spBadges .fbicon:not(:has(img)) b {
    display: inline;
}