/* Site font: Oxanium (variable weight, Latin) */
@font-face {
    font-family: 'Oxanium';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/oxanium/v6/RrQPboN_4yJ0JmiMUW7sIGjd1IA9G81JfkiLD3U.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

:root {
    color-scheme: dark;
    --bg: #0b1018;
    --panel: #121b27;
    --panel2: #182434;
    --line: #29394d;
    --muted: #8fa2b8;
    --text: #edf5ff;
    --cyan: #62d9ef;
    --gold: #f4c96b;
    --green: #6fe0a2;
    --red: #ff8290
}

* {
    box-sizing: border-box
}

* {
  cursor: url(https://i.imgur.com/jsogoUk.png), auto !important;
}

body {
    margin: 0;
    background: linear-gradient(rgba(11,16,24,.62),rgba(11,16,24,.62)),url('https://files.catbox.moe/2qqh17.png') center top/cover no-repeat fixed,var(--bg);
    min-height: 100vh;
    color: var(--text);
    font: 14px/1.45 Oxanium,Inter,system-ui,Segoe UI,sans-serif
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--line);
    background: #0b1018d9;
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(14px)
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.logo {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 6px 14px #dc0a2d55)
}

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

h1 {
    font-size: 21px;
    margin: 0;
    letter-spacing: .3px
}

.sub {
    color: var(--muted);
    font-size: 12px
}

.wrap {
    max-width: 1400px;
    margin: auto;
    padding: 22px 18px 60px
}

.stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 16px
}

.stat,.panel {
    background: linear-gradient(145deg,#162333,#101925);
    border: 1px solid var(--line);
    border-radius: 16px
}

.stat {
    padding: 15px 17px
}

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

.stat strong {
    font-size: 25px;
    display: block;
    margin-top: 4px
}

.progress {
    height: 7px;
    background: #263648;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 9px
}

.progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#51c8e7,#6fe0a2);
    width: 0
}

.toolbar {
    padding: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px
}

.toolbar input,.toolbar select,.toolbar button,.modal button,.modal input {
    background: #0d1621;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit
}

.toolbar input {
    flex: 1;
    min-width: 210px
}

.toolbar select {
    min-width: 130px
}

.toolbar button,.modal button {
    cursor: pointer
}

.primary {
    background: #164c63!important;
    border-color: #287c98!important
}

.toolbar button:hover,.modal button:hover {
    border-color: var(--cyan)
}

.tabs {
    display: flex;
    gap: 7px;
    overflow: auto;
    padding-bottom: 2px;
    margin: 0 0 14px
}

.tab {
    white-space: nowrap;
    border: 1px solid var(--line);
    background: #111b27;
    color: var(--muted);
    padding: 9px 13px;
    border-radius: 10px;
    cursor: pointer
}

.tab.active {
    background: #15394b;
    color: #b9f4ff;
    border-color: #287c98
}

.sectionhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 2px 10px;
    color: #c8d8e8
}

.sectionhead span {
    color: var(--muted);
    font-size: 12px
}

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

.card {
    background: linear-gradient(150deg,#172434,#101925);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    min-width: 0;
    position: relative
}

.card:hover {
    border-color: #4b8099;
    transform: translateY(-2px)
}

.card.caught {
    border-color: #3a866b;
    background: linear-gradient(150deg,#18352f,#111e25)
}

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

.sprite {
    height: 104px;
    display: grid;
    place-items: center
}

.sprite img {
    width: 112px;
    height: 104px;
    object-fit: contain;
    image-rendering: auto;
    color: transparent;   /* never flash alt text while a sprite is loading */
    font-size: 0;
    filter: drop-shadow(0 7px 8px #0006)
}

.pname {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.types {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 5px 0 8px
}

.type {
    font-size: 9px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 20px;
    background: #27384a;
    color: #d7e7f5
}

.quick {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap
}

.pill {
    border: 1px solid #33485d;
    border-radius: 8px;
    padding: 4px 7px;
    color: #a9bed1;
    font-size: 10px;
    cursor: pointer;
    background: #101a25
}

.pill.on {
    color: #9ff0c1;
    border-color: #398565;
    background: #17352d
}

.details {
    display: none;
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 9px
}

.card.expanded .details {
    display: block
}

.checkgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px
}

.check {
    display: flex;
    gap: 6px;
    align-items: center;
    color: #bdcbd9;
    font-size: 11px
}

.check input {
    accent-color: #5bd39a
}

.detailbtn {
    width: 100%;
    margin-top: 8px;
    background: #1b2a3a;
    color: #bcd4e6;
    border: 1px solid #344b60;
    border-radius: 8px;
    padding: 7px;
    cursor: pointer
}

.gencol {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px
}

.own {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #bdcbd9;
    font-size: 11px;
    user-select: none
}

.own input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #5bd39a;
    cursor: pointer
}

.card.caught .own {
    color: #9ff0c1
}

.customs {
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 9px
}

.empty {
    padding: 40px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 14px
}

.modalback {
    position: fixed;
    inset: 0;
    background: #000a;
    display: none;
    place-items: center;
    z-index: 10;
    padding: 18px
}

.modalback.show {
    display: grid
}

.modal {
    width: min(480px,100%);
    background: #142131;
    border: 1px solid #3a536b;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 20px 80px #0009
}

.modal h2 {
    margin: 0 0 6px
}

.modal p {
    color: var(--muted);
    font-size: 12px
}

.modal input {
    width: 100%;
    margin: 7px 0 12px
}

.modalactions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

footer {
    color: #70869b;
    text-align: center;
    font-size: 11px;
    margin-top: 30px
}

@media(max-width: 1000px) {
    .stats {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(max-width: 650px) {
    header {
        padding:17px
    }

    .stats {
        grid-template-columns: repeat(2,1fr)
    }

    .grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .toolbar select {
        flex: 1
    }

    .stat strong {
        font-size: 21px
    }
}

.sprite.withbg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px
}

.sprite img {
    transition: none
}

.formtag {
    text-align: center;
    color: #b9f4ff;
    font-size: 11px;
    font-weight: 600;
    margin-top: -2px
}

.statsub {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px
}

.shinytabs {
    margin-top: -6px
}

.shinytabs .tab {
    background: #17160f;
    border-color: #3b3720;
    color: #c9b877
}

.shinytabs .tab.active {
    background: #3a3115;
    color: #ffe08a;
    border-color: #8a7430
}

.headright {
    display: flex;
    align-items: center;
    gap: 12px
}

.checkall {
    background: #15394b;
    color: #b9f4ff;
    border: 1px solid #287c98;
    border-radius: 8px;
    padding: 5px 11px;
    font: inherit;
    font-size: 12px;
    cursor: pointer
}

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

.checkall[hidden] {
    display: none
}

.gencount {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b9f4ff!important;
    font-size: 12px;
    font-weight: 600
}

.gencount[hidden] {
    display: none
}

.genbar {
    display: block;
    width: 90px;
    height: 6px;
    background: #263648;
    border-radius: 20px;
    overflow: hidden
}

.genbar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#51c8e7,#6fe0a2)
}

.card.unreleased {
    border-style: dashed;
    border-color: #4a4f5a;
    background: linear-gradient(150deg,#1a1f28,#10151d)
}

.card.unreleased:hover {
    transform: none;
    border-color: #4a4f5a
}

.card.unreleased .sprite,.card.unreleased .pname,.card.unreleased .types {
    opacity: .4
}

.card.unreleased .sprite img {
    filter: grayscale(1) brightness(.7)
}

.unrel {
    color: #C62828;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .3px
}

.lock {
    position: absolute;
    left: 50%;
    top: 84px;
    transform: translateX(-50%);
    font-size: 34px;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
    filter: brightness(0) invert(1) drop-shadow(0 3px 6px #000b)
}

.sprite.bgfill {
    background-size: cover
}

.card.bgonly .sprite {
    background-color: #0d1621;
    height: 130px
}

.card.bgonly .sprite.bgfill {
    background-size: contain
}

.card.bgonly .formtag {
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.formtag.bgname {
    color: var(--muted);
    font-weight: 500;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sentinel {
    grid-column: 1/-1;
    height: 1px
}

.card {
    contain: layout style;
    content-visibility: auto;
    contain-intrinsic-size: auto 220px
}

/* Background art fills the whole box: the <img> is taller than the box and top-anchored, so any dark strip baked into the bottom of the image is cropped away. It is a real <img> (not a CSS background) so it can send no Referer, which the wiki host requires. */
.sprite.withbg {
    position: relative;
    overflow: hidden
}

.sprite.withbg>.bgimg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 122%;
    object-fit: cover;
    object-position: center top;
    filter: none;
    z-index: 0
}

.sprite.withbg>img:not(.bgimg) {
    position: relative;
    z-index: 1
}

.own input {
    transition: none;
    animation: none
}

.bgcard .own {
    font-size: 10px;
    gap: 4px
}

.bgcard .own input {
    width: 12px;
    height: 12px
}

/* ===== Trading tab ===== */
.viewbar {
    display: flex;
    gap: 8px;
    margin: 0 0 16px
}

.viewbtn {
    background: #111b27;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 600;
    cursor: pointer
}

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

.viewbtn.active {
    background: #15394b;
    color: #b9f4ff;
    border-color: #287c98
}

.tradeonly {
    display: none
}

body[data-view=trade] .tradeonly {
    display: block
}

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

.muted {
    color: var(--muted);
    font-size: 12px
}

.tradebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 14px
}

.tradebtns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.tradebtns button,.sharedhead button,.tadd select,.tadd input {
    background: #0d1621;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit
}

.tradebtns button,.sharedhead button,.tadd button {
    cursor: pointer
}

.tradebtns button:hover,.sharedhead button:hover,.tadd button:hover {
    border-color: var(--cyan)
}

.tadd button.primary {
    background: #164c63;
    border-color: #287c98;
    color: var(--text);
    border-radius: 10px;
    padding: 9px 16px;
    font: inherit
}

.tradecols {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    align-items: stretch
}

.tcol {
    padding: 16px
}

.tcol h2,.sharedpanel h3 {
    margin: 0 0 12px;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 8px
}

.sharedpanel h3 {
    font-size: 14px;
    color: #c8d8e8
}

.count {
    background: #15394b;
    color: #b9f4ff;
    border-radius: 20px;
    font-size: 12px;
    padding: 1px 9px;
    font-weight: 600
}

.count:empty {
    display: none
}

.tadd {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.tadd .tpoke {
    flex: 2 1 120px;
    min-width: 0
}

.tadd .tnote {
    flex: 3 1 90px;
    min-width: 0
}

.tadd select {
    flex: 1 1 110px;
    min-width: 0
}

.tadd .tqty,.titem .tqty {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--muted)
}

.tadd .tqty input {
    width: 62px;
    padding: 9px 6px
}

.tlist {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(136px,1fr));
    gap: 12px;
    align-items: start
}

.tlist .empty {
    grid-column: 1/-1
}

.titem {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(150deg,#172434,#101925);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 10px 6px 6px;
    min-width: 0
}

.titem.match {
    border-color: #3a866b;
    background: linear-gradient(150deg,#18352f,#111e25)
}

.titem.flash {
    animation: tflash 1s ease-out
}

@keyframes tflash {
    from {
        border-color: var(--cyan);
        box-shadow: 0 0 0 3px #62d9ef44
    }

    to {
        box-shadow: 0 0 0 0 #0000
    }
}

.tsp {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 4px 5px #0006)
}

.tinfo {
    min-width: 0;
    flex: 1 1 auto
}

.tname {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.tname small {
    color: var(--muted);
    font-weight: 500
}

.ttags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 3px
}

.vtag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 2px 7px;
    border-radius: 20px;
    background: #27384a;
    color: #d7e7f5
}

.v-shiny {
    background: #3a3115;
    color: #ffe08a
}

.v-shadow {
    background: #2c2240;
    color: #c9b3ff
}

.v-purified {
    background: #17323a;
    color: #9fe8f5
}

.v-lucky {
    background: #3b3515;
    color: #ffd84d
}

.v-mega,.v-dynamax,.v-gigantamax {
    background: #3b1f2b;
    color: #ffadc8
}

.v-match {
    background: #17352d;
    color: #9ff0c1
}

.v-any {
    background: #1d2b3a;
    color: #a9bed1
}

/* tags that had no colour of their own */
.v-normal {
    background: #27384a;
    color: #d7e7f5
}

.v-perfect {
    background: #3d2216;
    color: #ffa36b
}

.v-xxl {
    background: #172c45;
    color: #8ec5ff
}

.v-xxs {
    background: #2a2f17;
    color: #d4e68a
}

.v-costume {
    background: #3a1f3d;
    color: #f2a8ff
}

.v-background {
    background: #1f2a46;
    color: #a9b8ff
}

.v-location {
    background: #3a2a1a;
    color: #f0c08f
}

.v-special {
    background: #2f2f3a;
    color: #e0e0ff
}

/* Shadow / Purified tab icons */
.tab .tico {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.35em;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none
}

/* Shadow aura: sits behind the Pokémon like the purple flames of a Shadow Pokémon */
.shadowaura {
    position: absolute;
    inset: -2%;
    background: var(--shadow-bg) center/contain no-repeat;
    pointer-events: none;
    z-index: 0
}

.sprite.hasaura {
    position: relative
}

.sprite.hasaura>img {
    position: relative;
    z-index: 1
}

.timg>.shadowaura {
    inset: 0
}

/* Pokémon types: colours taken from the type badge sheet */
.type {
    color: #fff;
    text-shadow: 0 1px 2px #0007
}

.tnoteedit {
    flex: 0 1 190px;
    min-width: 0;
    background: #0d1621;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 8px;
    font: inherit;
    font-size: 12px
}

.tnoteedit:hover,.tnoteedit:focus {
    border-color: var(--line);
    outline: none
}

.tnote {
    color: var(--muted);
    font-size: 12px;
    max-width: 40%;
    text-align: right
}

.tqtyedit {
    width: 52px;
    background: #0d1621;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 4px;
    font: inherit;
    font-size: 12px
}

.tdel {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    padding: 6px 8px;
    border-radius: 8px
}

.tdel:hover {
    color: var(--red);
    background: #2a1a20
}

.empty.small {
    padding: 22px;
    font-size: 13px
}

.sharedpanel {
    padding: 16px;
    margin-bottom: 14px;
    border-color: #287c98
}

.sharedhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px
}

.sharedpanel .tradecols>div {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sharedpanel h3 {
    margin-bottom: 4px
}

@media(max-width: 900px) {
    .tradecols {
        grid-template-columns:1fr
    }
}

@media(max-width: 650px) {
    .titem {
        flex-wrap:wrap
    }

    .tnoteedit {
        flex: 1 1 100%;
        order: 5
    }

    .tnote {
        max-width: none;
        text-align: left;
        flex: 1 1 100%
    }
}

/* ===== Image picker ===== */
.pickbtn {
    margin-left: auto;
    background: #15394b;
    color: #b9f4ff;
    border: 1px solid #287c98;
    border-radius: 10px;
    padding: 7px 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer
}

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

.pick {
    width: min(760px,100%);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    background: #101822;
    border: 1px solid #2c4156;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 20px 80px #000b
}

.pickhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.pickhead h2 {
    margin: 0;
    font-size: 17px
}

.pickhead button {
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px
}

.pickhead button:hover {
    color: var(--text);
    background: #ffffff14
}

.pickrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px
}

#pickSearch {
    width: 100%;
    background: #0a0f16;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 14px;
    font: inherit;
    margin-bottom: 10px
}

#pickSearch:focus {
    outline: none;
    border-color: #287c98
}

.chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.chip {
    background: #1b2431;
    color: #b8c6d6;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 7px 14px;
    font: inherit;
    font-size: 13px;
    cursor: pointer
}

.chip:hover {
    border-color: #3a536b
}

.chip.on {
    background: #15394b;
    color: #b9f4ff;
    border-color: #287c98
}

.pickgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(80px,1fr));
    gap: 6px;
    overflow-y: auto;
    background: #0a0f16;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px;
    height: min(58vh,560px);
    align-content: start;
    grid-auto-rows: min-content;
    overscroll-behavior: contain
}

.ptile {
    position: relative;
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    min-width: 0
}

.ptile:focus-visible {
    outline: 2px solid var(--cyan)
}

.ptile::before {
    content: '';
    display: block;
    padding-top: 100%
}

.ptile:hover {
    background: #ffffff12
}

.ptile.sel {
    border-color: #6fe0a2;
    background: #6fe0a21f
}

.ptile .pbg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px
}

.ptile .pfg {
    position: absolute;
    left: 6%;
    top: 6%;
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px #0008)
}

.psh {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 11px;
    line-height: 1;
    text-shadow: 0 1px 3px #000
}

.pcheck {
    position: absolute;
    left: 4px;
    top: 4px;
    background: #2fa56f;
    color: #04150d;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    padding: 0 5px
}

.pickfoot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px
}

.pickfoot button {
    background: none;
    border: 0;
    color: var(--red);
    cursor: pointer;
    font: inherit;
    font-size: 13px
}

.tthumb {
    position: relative;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 10px;
    overflow: hidden
}

.tthumb .tsp {
    position: absolute;
    left: 6%;
    top: 6%;
    width: 88%;
    height: 88%
}

.tthumb .tbg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.v-background {
    background: #1c2f4a;
    color: #a9d0ff
}

.v-costume {
    background: #2d2a45;
    color: #d2c8ff
}

@media(max-width: 650px) {
    .pickgrid {
        grid-template-columns:repeat(4,minmax(0,1fr));
        height: 58vh
    }
}

/* ===== Trade lists as picture tiles ===== */
.tcard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.tcard.match .timg {
    border-color: #3a866b;
    box-shadow: 0 0 0 2px #3a866b66
}

.tcard.flash .timg {
    animation: tflash 1s ease-out
}

.timg {
    position: relative;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #2c4a5e;
    background: linear-gradient(170deg,#1f3b50,#101a26)
}

.timg .tbg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.timg .tsp {
    position: absolute;
    left: 6%;
    top: 6%;
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 4px 5px #0008)
}

.tsh {
    position: absolute;
    left: 6px;
    top: 4px;
    font-size: 16px;
    line-height: 1;
    text-shadow: 0 1px 3px #000
}

.tqb {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: #000b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px
}

.timg .tdel {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    background: #000a;
    color: #fff;
    font-size: 12px;
    border-radius: 50%
}

.timg .tdel:hover {
    background: #7a2236;
    color: #fff
}

.tcap {
    min-width: 0
}

.tcap .tname {
    font-size: 13px
}

.tcap .ttags {
    margin-top: 3px
}

.tctl {
    display: flex;
    gap: 6px;
    align-items: center
}

.tctl .tnoteedit {
    flex: 1 1 0;
    width: 0;
    border-color: var(--line)
}

.tcard>.tnote {
    max-width: none;
    text-align: left
}

@media(max-width: 650px) {
    .tlist {
        grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
        gap: 10px
    }
}

.tcap .vtag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.timg .tbg,.ptile .pbg {
    height: 122%;
    inset: auto;
    left: 0;
    top: 0;
    object-position: center top
}

.ptile {
    overflow: hidden
}

.timg .tbg,.ptile .pbg {
    height: 135%
}

.cardov {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #000c;
    overflow: auto;
    padding: 18px;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

.cardbox {
    position: relative;
    width: min(760px,100%)
}

.cardx {
    position: absolute;
    right: 6px;
    top: -2px;
    z-index: 2;
    background: #000a;
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 15px
}

.cardhint {
    color: #cfe3d6;
    font-size: 13px;
    margin: 0 44px 12px 0
}

.cardsheet {
    background: #0d2b22;
    border-radius: 18px;
    padding: 26px 24px 30px
}

.cardfoot {
    margin-top: 18px;
    text-align: center;
    color: #8fc7a4;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px
}

.cardsheet h2 {
    margin: 0 0 14px;
    text-align: center;
    color: #5ee08a;
    font-size: 34px;
    letter-spacing: .5px
}

.cardsheet h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    font-size: 28px
}

.cardsheet h3 i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block
}

.cardsheet h3.g {
    color: #5ee08a
}

.cardsheet h3.g i {
    background: #3ddc84
}

.cardsheet h3.o {
    color: #ffc46b
}

.cardsheet h3.o i {
    background: #ffb347
}

.cgrid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px
}

.ccell {
    min-width: 0
}

.ccell .timg {
    border: 3px solid #2f7a45;
    border-radius: 18px
}

.ccell b {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #e8f7ee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ccell small {
    display: block;
    color: #8fc7a4;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media(max-width: 560px) {
    .cgrid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

.cardbar {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 44px 12px 0
}

.cardbar .cardhint {
    margin: 0;
    flex: 1
}

.cardsave {
    background: #2fa56f;
    color: #04150d;
    border: 0;
    border-radius: 10px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap
}

.cardov.capturing {
    background: #000
}

.cardov.capturing .cardbar,.cardov.capturing .cardx {
    visibility: hidden
}

.donate {
    flex: none;
    color: #fff;
    background: linear-gradient(135deg,#ff6a4d,#e0342f);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .2px;
    padding: 13px 24px;
    border-radius: 14px;
    border: 1px solid #ff9a85;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    white-space: nowrap;
    box-shadow: 0 6px 22px #e0342f55;
    transition: transform .15s,box-shadow .15s
}
.donate:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px #e0342f88;
    filter: brightness(1.08)
}

.donatelink {
    color: var(--gold);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 6px
}

.donatelink:hover {
    text-decoration: underline
}

@media(max-width: 650px) {
    .donate {
        font-size:12px;
        padding: 8px 11px
    }

    .sub {
        display: none
    }
}

/* Shiny icon (ic_shiny.png): yellow disc with white sparkles, used wherever the sparkle emoji was */
.shico {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.35em;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none
}

.tsh .shico {
    width: 28px;
    height: 28px;
    margin: -3px 0 0 -3px;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6))
}

.psh .shico {
    width: 20px;
    height: 20px;
    margin: -2px -2px 0 0;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6))
}

.genlbl {
    white-space: nowrap
}

.genlbl .shico {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.3em;
    margin-right: 1px
}

/* Type colours (from the type badge sheet) */
.type.t-normal { background: #9fa19f }
.type.t-fire { background: #e62829 }
.type.t-fighting { background: #ff8000 }
.type.t-water { background: #2980ef }
.type.t-flying { background: #81b9ef }
.type.t-grass { background: #3fa129 }
.type.t-poison { background: #9141cb }
.type.t-electric { background: #fac000 }
.type.t-ground { background: #915121 }
.type.t-psychic { background: #ef4179 }
.type.t-rock { background: #afa981 }
.type.t-ice { background: #3dcef3 }
.type.t-bug { background: #91a119 }
.type.t-dragon { background: #5060e1 }
.type.t-ghost { background: #704170 }
.type.t-dark { background: #624d4e }
.type.t-steel { background: #60a1b8 }
.type.t-fairy { background: #ef70ef }

.v-nundo {
    background: #2b2f3d;
    color: #b7c4ff
}

/* Tabs: both rows use identical, evenly spread buttons that stretch to the toolbar's width */
.tabs .tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 1
}

.tabs .tab img,.tabs .tab .tico,.tabs .tab .shico {
    width: 20px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
    flex: none
}

/* Tabs: both rows are a 3-column grid, so every tab (Standard / Location Background / Special Background and their Shiny
   versions) has exactly the same width and height and the two rows line up column for column. */
.tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    overflow: visible
}

.tabs .tab {
    flex: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    overflow: hidden
}

@media(max-width: 650px) {
    .tabs .tab {
        font-size: 12px;
        padding: 0 6px;
        gap: 4px
    }

    .tabs .tab img,.tabs .tab .tico,.tabs .tab .shico {
        width: 16px;
        height: 16px
    }
}

/* ===== Global chat (chat.js) ===== */
#chat, #chatBubble { font-family: inherit }

#chat {
    position: fixed;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-left: 1px solid var(--line);
    color: var(--text)
}

#chat .chathead {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 10px;
    border-bottom: 1px solid var(--line);
    background: var(--panel2);
    flex: none
}

#chat .chattitle { display: none }
#chat .chattitlewrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 }
#chat .chatmodes { display: flex; gap: 6px }
#chat .chatmode {
  background: #111b27;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 4px 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  min-width: 4.6em; /* matches typical "Log out" width */
  text-align: center;
  box-sizing: border-box;
}
#chat .chatmode.on { border-color: var(--cyan); color: var(--text); background: #152433 }
#chat .chatmode:hover { border-color: var(--cyan); color: var(--text) }
#cOut { min-width: 4.6em; text-align: center; box-sizing: border-box }
#chat .chatwho { margin-left: auto; color: var(--cyan); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; flex: none }
#chat .chatactico { display: block; pointer-events: none }

#chat .chathead button {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    cursor: pointer
}

#chat .chathead button:hover { border-color: var(--cyan) }
#chatClose { display: none }

#chat .chatbody { flex: 1; min-height: 0; display: flex; flex-direction: column }
#chat .chatauth { padding: 14px; overflow: auto }
#chat #chatMain { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative }
#chat [hidden] { display: none !important }

#chat input[type=text], #chat input:not([type]), #chat input[type=password] {
    width: 100%;
    margin: 0 0 8px;
    padding: 10px 11px;
    background: #0e1722;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    font: inherit
}

#chat input:focus { outline: none; border-color: var(--cyan) }

.chatseg { display: flex; gap: 6px; margin-bottom: 12px }
.chatseg button { flex: 1; height: 36px; background: #111b27; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); cursor: pointer; font: inherit }
.chatseg button.on { background: #15394b; color: #b9f4ff; border-color: #287c98 }

#chatForm .signonly { display: none }
#chatForm.signup .signonly { display: block }
#chatForm.signup label.signonly { display: flex }
#chat .chk { gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted); margin: 2px 0 8px }
#chat .chk input { margin-top: 2px; flex: none }
.chatwarn { font-size: 12px; color: var(--gold); margin: 0 0 8px }
.chatnote { font-size: 12px; color: var(--muted); margin: 10px 0 0 }
#cTs { min-height: 0; margin-bottom: 8px }

#chat .chatprimary { height: 38px; padding: 0 14px; background: #15394b; color: #b9f4ff; border: 1px solid #287c98; border-radius: 9px; cursor: pointer; font: inherit }
#chat .chatprimary:hover { border-color: var(--cyan) }
#chat .chatprimary:disabled { opacity: .5 }
#cSubmit { width: 100% }

.chaterr { color: var(--red); font-size: 12px; min-height: 0; padding: 0 12px }
#chatForm .chaterr { padding: 8px 0 0 }
.chaterr.ok { color: var(--green) }
#cMsgErr:empty { display: none }
#cMsgErr { padding: 4px 12px }

.chattools { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex: none; flex-wrap: wrap }
.chattools button { background: #111b27; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 4px 9px; font: inherit; font-size: 12px; cursor: pointer }
.chattools button:hover { border-color: var(--cyan); color: var(--text) }
#cOut { margin-left: auto }

.chatlog { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; overscroll-behavior: contain }
.chatempty { color: var(--muted); text-align: center; margin: auto; font-size: 13px }
/* Discord-style: flat rows, no boxes. Hover highlights the row; consecutive posts from one user collapse under one header. */
.cmsg { position: relative; background: none; border: 0; border-radius: 0; padding: 2px 14px 2px 14px; margin-top: 12px }
.cmsg.cont { margin-top: 0 }
.cmsg:first-child { margin-top: 0 }
.cmsg:hover, .cmsg:focus-within { background: rgba(255,255,255,.035) }
.cmeta { display: flex; align-items: baseline; gap: 6px; font-size: 12px }
.cname { color: var(--cyan); font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px }
.cmsg.mine .cname { color: var(--gold) }
.cclan { font-weight: 700; font-size: 12.5px; white-space: nowrap; color: var(--muted) }
.ctime { color: var(--muted); font-size: 11px; margin-left: 2px }
.cmsg.cont .cmeta { display: none }
.cact { position: absolute; right: 8px; top: -12px; display: none; gap: 2px; background: #131e2c; border: 1px solid var(--line); border-radius: 8px; padding: 1px 2px; z-index: 1 }
.cmsg:hover .cact, .cmsg:focus-within .cact { display: flex }
.cmsg.cont .cact { top: -14px }
.cact button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px }
.cact button:hover { background: #1b2a3c; color: var(--text) }
.ctext { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 1px; font-size: 13.5px; line-height: 1.35 }
.ctext a { color: var(--cyan); text-decoration: underline }
.ctext .cgif { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; margin-top: 6px; object-fit: contain }

/* clan admin panel */
.clanrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.clanrow input[type=text] { flex: 1; min-width: 70px; height: 32px }
.clanrow input[type=color] { width: 34px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #111b27; cursor: pointer }
.clanrow select { height: 32px; background: #111b27; color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; padding: 0 6px }

.chatsend { display: flex; gap: 6px; padding: 8px 10px 4px; flex: none; align-items: center }
.chatsend input { flex: 1; margin: 0 !important }
.chattyping { flex: none; height: 0; overflow: hidden; padding: 0 12px; display: flex; align-items: center; font-size: 12px; color: var(--muted); transition: height .15s ease }
.chattyping.on { height: 30px }
.chattyping.on .tbubble { animation: tin .18s ease-out }
.chattyping .tbubble { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 11px; background: #15222f; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; white-space: nowrap; overflow: hidden }
.chattyping b { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.chattyping .tbubble > span:last-child { flex: none }
.tdots { display: inline-flex; align-items: center; gap: 4px; flex: none }
.tdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: tdot 1.2s infinite ease-in-out }
.tdots i:nth-child(2) { animation-delay: .18s }
.tdots i:nth-child(3) { animation-delay: .36s }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); opacity: .4 } 30% { transform: translateY(-5px); opacity: 1 } }
@keyframes tin { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .tdots i { animation: none; opacity: .8 } .chattyping.on .tbubble { animation: none } }
.chatfilebtn { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #111b27; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--text); font-size: 18px; line-height: 1 }
.chatfilebtn:hover { border-color: var(--cyan) }
.chatshare { margin: 2px 10px 10px; background: transparent; border: 1px dashed var(--line); color: var(--muted); border-radius: 8px; padding: 6px; font: inherit; font-size: 12px; cursor: pointer; flex: none }
.chatshare:hover { border-color: var(--cyan); color: var(--text) }

.chatx { position: absolute; inset: 0; background: var(--panel); z-index: 2; display: flex; flex-direction: column }
.chatxhead { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line) }
.chatxhead button { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 8px; width: 30px; height: 30px; cursor: pointer }
.chatxbody { flex: 1; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px }
.chatxrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #0e1722; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px }
.chatxrow.col { flex-direction: column; align-items: stretch }
.chatxrow em { color: var(--muted); font-size: 12px }
.chatxrow button { background: #111b27; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 4px 9px; font: inherit; font-size: 12px; cursor: pointer }
.chatxbtns { display: flex; gap: 6px; flex-wrap: wrap }

#chatBubble { display: none; position: fixed; z-index: 59; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; border-radius: 50%; background: #15394b; border: 1px solid #287c98; color: #fff; font-size: 24px; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.45) }
#chatBadge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #1a0508; font: 700 12px/20px Oxanium, sans-serif; font-style: normal; text-align: center }

/* Desktop: a floating card in the bottom-right corner. It overlays the page (no padding added to the site, so nothing is squished); use the 💬 button to collapse it. */
@media (min-width: 901px) {
    #chat {
        top: auto;
        right: 5px;
        bottom: 5px;
        width: 380px;
        height: 520px;
        max-height: calc(100vh - 28px);
        border-radius: 14px;
        border: 1px solid var(--line);
        box-shadow: 0 8px 32px rgba(0,0,0,.45);
        transition: width .18s, height .18s
    }
    #chat.min { width: 44px; height: 48px; border-radius: 12px }
    /* Keep the site where it was on the left and let only its RIGHT edge make room for the chat, so cards are never covered.
       (On wide screens the site's own side margin already provides most of that room.) */
    body.haschat .wrap {
        max-width: none; margin: 0;
        padding-left: max(18px, calc((100vw - 1400px) / 2 + 18px));
        padding-right: max(416px, calc((100vw - 1400px) / 2 + 18px));
        transition: padding-right .18s
    }
    body.haschat.chatmin .wrap { padding-right: max(80px, calc((100vw - 1400px) / 2 + 18px)) }
    #chat.min .chatbody, #chat.min .chattitle, #chat.min .chattitlewrap, #chat.min .chatwho { display: none }
    #chat.min .chathead { padding: 0 6px; justify-content: center }
}

/* Phones / narrow windows: a chat bubble that opens a slide-up panel. */
@media (max-width: 900px) {
    #chatBubble { display: flex }
    #chat { left: 0; right: 0; bottom: 0; height: 78vh; height: 78dvh; border: 1px solid var(--line); border-radius: 16px 16px 0 0; transform: translateY(110%); transition: transform .2s; padding-bottom: env(safe-area-inset-bottom, 0px) }
    #chat.open { transform: none }
    #chatMin { display: none }
    #chatClose { display: inline-block; margin-left: 6px }
    #chat .chatwho { margin-left: auto }
    #chat.open ~ #chatBubble, body:has(#chat.open) #chatBubble { display: none }
}

/* ===== Admin tab (admins only; shown next to Trading) ===== */
.adminonly { display: none }
body[data-view=admin] .adminonly { display: block }
body[data-view=admin] .dexonly { display: none !important }
#adminTabBtn[hidden] { display: none }
.adm { color: var(--text) }
.adm * { box-sizing: border-box }
.admtabs { display: flex; gap: 6px; padding: 0 0 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.admtabs button { background: #111b27; border: 1px solid var(--line); color: var(--muted); border-radius: 9px; padding: 6px 14px; font: inherit; cursor: pointer }
.admtabs button:hover { border-color: var(--cyan) }
.admtabs button.on { background: #15394b; color: #b9f4ff; border-color: #287c98 }
.admstatus { padding: 0; font-size: 13px }
.admstatus.ok, .admstatus.bad { padding: 8px 0 }
.admstatus.ok { color: var(--green) } .admstatus.bad { color: var(--red) }
.admbody { padding: 12px 0 30px }
.admbar { display: flex; align-items: center; margin-bottom: 10px }
.adm input[type=text] { height: 34px; background: #0e1722; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; min-width: 0 }
.adm input[type=text]:focus { outline: none; border-color: var(--cyan) }
.admsearch { flex: 1; max-width: 320px }
.adm input[type=color] { width: 36px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #111b27; cursor: pointer }
.adm select { height: 34px; background: #111b27; color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; padding: 0 6px }
.admacts button { background: #111b27; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; height: 34px }
.admacts button:hover { border-color: var(--cyan) }
.admacts button.danger { color: #ff9aa5 } .admacts button.danger:hover { border-color: var(--red) }
.admlist h4 { margin: 18px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em }
.admlist h4:first-child { margin-top: 0 }
.admrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; flex-wrap: wrap }
.admrow:hover { background: rgba(255,255,255,.04) }
.admrow.col { flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line); border-radius: 0 }
.admwho { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap }
.admwho b { color: var(--cyan) }
.admacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.admbadge { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid #287c98; color: #b9f4ff }
.admbadge.red { border-color: var(--red); color: #ff9aa5 }
.admpre { white-space: pre-wrap; word-break: break-all; font-size: 12px; background: #0e1722; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-top: 10px; max-height: 60vh; overflow: auto }
.admchip { display: inline-flex; align-items: center; gap: 4px; background: #111b27; border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 13px }
.admacts button.admchipx { height: 22px; width: 22px; padding: 0; border-radius: 50%; line-height: 1; color: var(--muted) }
.admacts button.admchipx:hover { color: #ff9aa5; border-color: var(--red) }

/* name color picker + "+" upload button */
.chatcolor { display: inline-flex; align-items: center; gap: 6px; background: #111b27; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 3px 9px 3px 4px; font-size: 12px; cursor: pointer }
.chatcolor:hover { border-color: var(--cyan); color: var(--text) }
.chatcolor input { width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer }
.chatfilebtn span {font-size: 26px;font-weight: 300;line-height: 1;margin-top: 2px;}
.chatfilebtn { border-radius: 50% }

/* loading state: shimmering placeholder cards + spinner (replaces the static "Loading…" box) */
.skel { display: block; height: 212px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel) linear-gradient(100deg, transparent 30%, rgba(127,231,255,.10) 50%, transparent 70%) 200% 0 / 200% 100% no-repeat; opacity: 0; animation: skelshim 1.3s linear infinite, skelin .25s ease .4s forwards }
.skel:nth-child(2n) { animation-delay: .15s } .skel:nth-child(3n) { animation-delay: .3s }
@keyframes skelin { to { opacity: 1 } }
@keyframes skelshim { to { background-position: -200% 0 } }
.spin { display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border: 2px solid rgba(127,231,255,.25); border-top-color: var(--cyan); border-radius: 50%; animation: spin360 .8s linear infinite }
@keyframes spin360 { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; opacity: 1 } .spin { animation: none } }

/* first load: cards fade (and settle up a few px) into place instead of popping in; later renders stay instant */
.grid.out { opacity: 0; transition: opacity .12s ease-out; pointer-events: none }
.grid.gin { animation: gin .3s ease-out both }
@keyframes gin { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .grid.gin { animation: none } }

/* ===== Live Twitch box (twitch.js) =====
   Desktop: floats directly above the global chat, exactly as wide as the chat (380px) and exactly 16:9.
   The video is zoomed to cover the whole box, so there are no black bars. Phones: a normal 16:9 block under the header. */
#twitchBox { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--text); font-family: inherit; margin: 10px 12px 0; display: flex; flex-direction: column }
#twitchBox .twhead { flex: none; display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 5px 0 12px; background: var(--panel2); border-bottom: 1px solid var(--line) }
#twitchBox .twhead button, #twitchBox .twlink { background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 8px; font: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; padding: 0; font-size: 15px }
#twitchBox .twhead button:hover, #twitchBox .twlink:hover { color: var(--text); border-color: var(--cyan) }
#twitchBox .twtitle { font-size: 14px; white-space: nowrap; margin-left: 8px }
#twitchBox .twname { color: var(--cyan); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; margin: 0 auto 0 8px }
#twitchBox .twdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9146ff; box-shadow: 0 0 0 3px rgba(145,70,255,.25) }
#twitchBox [hidden] { display: none !important }
#twitchBox .twvideo { position: relative; flex: none; aspect-ratio: 16 / 9; background: #000; overflow: hidden }
/* the box is exactly 16:9, so the stream fits edge to edge: no bars and nothing cropped */
#twitchBox .twmount { position: absolute; inset: 0 }
#twitchBox .twplayer { position: absolute; inset: 0 }
#twitchBox iframe { display: block; width: 100%; height: 100%; border: 0 }
#twitchBox.playing iframe { pointer-events: none }   /* mouse never reaches the player, so Twitch's hover bar (title / Follow / Gift a Sub) never shows */
#twitchBox .twvideo::before { content: "Loading stream\2026"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px }
#twitchBox .twplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: #15394b; color: #b9f4ff; border: 1px solid #287c98; border-radius: 999px; padding: 9px 18px; font: inherit; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.6) }
#twitchBox .twplay:hover { border-color: var(--cyan) }
#twitchBox .twoff { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; background: var(--panel); color: var(--muted); font-size: 13px; cursor: default }
#twitchBox .twoff p { margin: 0; max-width: 300px }
#twitchBox .twoff button { background: #15394b; color: #b9f4ff; border: 1px solid #287c98; border-radius: 9px; padding: 7px 16px; font: inherit; cursor: pointer; width: auto; height: auto }
#twitchBox .twoff button:hover { border-color: var(--cyan) }
#twitchBox .twhead button#twMute { width: auto; min-width: 28px; padding: 0 7px; gap: 5px }
#twitchBox.muted .twhead button#twMute { background: #15394b; border-color: #287c98; color: #b9f4ff; font-size: 12px; animation: twpulse 1.6s ease-in-out infinite }
@keyframes twpulse { 50% { box-shadow: 0 0 0 4px rgba(98,217,239,.25) } }
@media (prefers-reduced-motion: reduce) { #twitchBox.muted .twhead button#twMute { animation: none } }

@media (min-width: 901px) {
    #twitchBox {
        --chat-h: min(520px, calc(100vh - 275px));          /* chat gives up height on short screens so both fit */
        position: fixed; z-index: 60; right: 5px; width: 380px; margin: 0;
        bottom: calc(5px + var(--chat-h) + 8px);
        /* tall enough that the top edge lines up with the donation goal bar (twitch.js sets --tw-top); never shorter than header + 16:9 video */
        height: calc(100vh - var(--tw-top, 0px) - (5px + var(--chat-h) + 8px));
        min-height: min-content; max-height: 640px;
        box-shadow: 0 8px 32px rgba(0,0,0,.45);
        transition: bottom .18s
    }
    body.chatmin #twitchBox { --chat-h: 48px; height: auto }   /* chat collapsed to its little button: sit right on top of it, natural size */
    body.hastwitch #chat:not(.min) { max-height: calc(100vh - 275px) }
}

/* ===== Extra-stream tabs ===== */
#twitchBox .twpills { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 8px; background: var(--panel2); border-bottom: 1px solid var(--line) }
#twitchBox .twpill { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px 2px 8px; font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px }
#twitchBox .twpill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #55606e }
#twitchBox .twpill.live::before { background: #ff4d5e; box-shadow: 0 0 0 3px rgba(255,77,94,.25) }
#twitchBox .twpill.on, #twitchBox .twpill:hover { color: var(--text); border-color: var(--cyan) }

/* =====================================================================================================
   New features (extras.js): nav, views, cloud chip, community, friend codes, chat upgrades, install
   ===================================================================================================== */
.viewbar { flex-wrap: wrap; align-items: center }
.viewbtn { padding: 10px 16px }
.viewtools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }
.cloudstat, .livebtn, .installbtn { background: #111b27; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap }
.cloudstat:hover, .livebtn:hover, .installbtn:hover { border-color: var(--cyan); color: var(--text) }
.cloudstat[data-state=ok] { color: var(--green) } .cloudstat[data-state=err] { color: var(--red); border-color: #6b2a33 } .cloudstat[data-state=saving] { color: var(--gold) }
.livebtn.off { opacity: .6 }
.installbtn { margin-left: auto; margin-right: 10px; color: #b9f4ff; background: #15394b; border-color: #287c98 }
.installbtn[hidden] { display: none }
@media (max-width: 650px) { .installbtn { font-size: 12px; padding: 7px 10px; margin-right: 6px } .viewtools { margin-left: 0; width: 100% } .viewbtn { padding: 9px 12px; font-size: 13px } }

/* extra views */
.xonly { display: none }
body[data-view=community] #communityView, body[data-view=codes] #codesView, body[data-view=suggestions] #suggestionsView, body[data-view=social] #socialView { display: block }
body[data-view=community] .dexonly, body[data-view=codes] .dexonly, body[data-view=suggestions] .dexonly, body[data-view=social] .dexonly { display: none !important }
.xonly .panel, #matchBox.panel { margin-bottom: 14px; padding: 16px }
.xhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px }
.xhead b { font-size: 16px }
.xform { display: grid; gap: 10px }
.xform label { display: grid; gap: 4px; font-size: 12px; color: var(--muted) }
.xform input, .xform select, .xform textarea, .xfilters input, .xfilters select { background: #0e1722; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14px; width: 100%; min-width: 0 }
.xform input:focus, .xform select:focus, .xform textarea:focus, .xfilters input:focus { outline: none; border-color: var(--cyan) }
.xrow { display: flex; gap: 10px; flex-wrap: wrap } .xrow > label { flex: 1 1 150px } .xrow > .xgrow { flex: 3 1 240px }
.xcheck { display: flex !important; grid-template-columns: none; gap: 10px; align-items: flex-start; color: var(--text) !important; font-size: 13.5px !important; cursor: pointer }
.xcheck input { width: auto; margin-top: 3px }
.xactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.xbtn { background: #111b27; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center }
.xbtn:hover { border-color: var(--cyan) } .xbtn:disabled { opacity: .5; cursor: default }
.xbtn.primary { background: #15394b; color: #b9f4ff; border-color: #287c98 }
.xbtn.danger { color: var(--red); border-color: #6b2a33 }
.xlogin { text-align: center; padding: 18px; display: grid; gap: 8px; justify-items: center }
.xlogin p { margin: 0; max-width: 420px }
.xteam { display: inline-block; font-size: 12px; filter: drop-shadow(0 0 4px var(--tc)) }
.xcardstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px }
.xcardstats > div { background: #0e1722; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px }
.xcardstats small { display: block; color: var(--muted); font-size: 11px } .xcardstats b { font-size: 17px }
.xseg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.xseg button { background: #111b27; color: var(--muted); border: 0; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer }
.xseg button.on { background: #15394b; color: #b9f4ff }
.xlb { display: grid; gap: 6px }
.xlbrow { display: grid; grid-template-columns: 38px minmax(90px, 1.4fr) minmax(60px, 2fr) 64px 100px; gap: 10px; align-items: center; background: #0e1722; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; color: var(--text); font: inherit; text-align: left; cursor: pointer; width: 100% }
.xlbrow:hover { border-color: var(--cyan) } .xlbrow.me { border-color: var(--gold) }
.xrank { font-weight: 700; color: var(--muted); text-align: center } .xname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
.xbar { height: 8px; background: #0b1018; border-radius: 99px; overflow: hidden } .xbar i { display: block; height: 100%; background: linear-gradient(90deg, #3aa6c4, #62d9ef) }
.xval { font-weight: 700; text-align: right } .xsub { color: var(--muted); font-size: 12px; text-align: right }
@media (max-width: 650px) { .xlbrow { grid-template-columns: 30px 1fr 56px; } .xbar, .xsub { display: none } }

/* modal + toast */
.xmodalback { position: fixed; inset: 0; z-index: 200; background: rgba(4,8,14,.72); display: grid; place-items: center; padding: 16px; overflow-y: auto }
.xmodal { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.6) }
.xmodal h2 { margin: 0 0 8px; font-size: 20px } .xmodal h3 { margin: 16px 0 8px }
.xclose { position: absolute; right: 10px; top: 10px; background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; width: 32px; height: 32px; border-radius: 8px }
.xclose:hover { color: var(--text); background: #1b2a3c }
.xpname p { margin: 0 0 12px; color: var(--muted) }
.xcode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #0e1722; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 12px 0 }
.xcode small { color: var(--muted); width: 100% } .xcode b { font-size: 20px; letter-spacing: 1px; font-variant-numeric: tabular-nums }
.xcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px } @media (max-width: 650px) { .xcols { grid-template-columns: 1fr } }
.xchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px }
.xchip { background: #15394b; color: #b9f4ff; border: 1px solid #287c98; border-radius: 99px; padding: 2px 10px; font-size: 12px }
.xsteps { padding-left: 20px; line-height: 1.6 }
#xToast { position: fixed; z-index: 300; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none }
.xtoastmsg { background: #15222f; color: var(--text); border: 1px solid #287c98; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; box-shadow: 0 8px 28px rgba(0,0,0,.5); transition: opacity .3s, transform .3s; animation: xin .25s ease-out }
.xtoastmsg.out { opacity: 0; transform: translateY(6px) } @keyframes xin { from { opacity: 0; transform: translateY(8px) } }

/* trade matches */
.xmatches { display: grid; gap: 10px }
.xmatch2 { background: #0e1722; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px }
.xmhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap } .xmatch2 small { color: var(--muted) }
.xtag { margin-left: auto; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px } .xtag.two { color: var(--green); border-color: #2f7a53 }

/* friend codes */
.xfilters { display: flex; gap: 8px; flex-wrap: wrap; width: 100% } .xfilters input { flex: 1 1 220px } .xfilters select { flex: 0 1 160px; width: auto }
.xcodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px }
.xcodecard { background: #0e1722; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 6px; align-content: start }
.xcodetop { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap }
.xcodenum { font-size: 22px; font-weight: 700; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; color: var(--cyan) }
.xnote { font-size: 13px; color: var(--text); overflow-wrap: anywhere }

/* chat upgrades */
.cmsg.ment { background: rgba(244,201,107,.09); box-shadow: inset 3px 0 0 var(--gold) }
.cmsg.flashrow { animation: flashrow 1.4s ease-out } @keyframes flashrow { 0%, 40% { background: rgba(98,217,239,.22) } }
.cquote { display: block; max-width: 100%; text-align: left; background: rgba(255,255,255,.04); color: var(--muted); border: 0; border-left: 2px solid var(--cyan); border-radius: 4px; padding: 2px 8px; margin: 2px 0; font: inherit; font-size: 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cquote b { color: var(--cyan) }
.cmention { color: #ffd98a; background: rgba(244,201,107,.14); border-radius: 4px; padding: 0 3px } .cmention.me { background: rgba(244,201,107,.32); color: #fff }
.ccode { background: #0b1018; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px }
.chatreply { display: flex; align-items: center; gap: 4px; margin: 0 10px; padding: 4px 8px; background: #0e1722; border-left: 2px solid var(--cyan); border-radius: 6px; font-size: 12px; color: var(--muted); min-width: 0 }
.chatreply[hidden], .chatemoji[hidden], .chatnew[hidden] { display: none }
.chatreply b { color: var(--cyan) } .chatreply .cq { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chatreply button { background: transparent; border: 0; color: var(--muted); cursor: pointer; margin-left: auto }
.chatemoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin: 4px 10px 0; padding: 6px; background: #0e1722; border: 1px solid var(--line); border-radius: 10px; max-height: 150px; overflow-y: auto }
.chatemoji button { background: transparent; border: 0; font-size: 18px; cursor: pointer; border-radius: 6px; padding: 2px } .chatemoji button:hover { background: #1b2a3c }
.chatnew { display: block; margin: -34px auto 8px; position: relative; z-index: 4; background: #15394b; color: #b9f4ff; border: 1px solid #287c98; border-radius: 99px; padding: 4px 14px; font: inherit; font-size: 12px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.5) }
@media (prefers-reduced-motion: reduce) { .xtoastmsg, .cmsg.flashrow { animation: none } }


/* ===== loading polish for every tab =====
   placeholders show right away (no blank wait), look like the thing they stand in for, and real content fades in
   the same way the Pokédex cards do. */
.skelgrid .skel { animation: skelshim 1.3s linear infinite, skelin .2s ease .05s forwards }
.xfadein { animation: gin .3s ease-out both }
@media (prefers-reduced-motion: reduce) { .xfadein { animation: none } .skelgrid .skel { animation: none; opacity: 1 } }
.skelgrid .skel:nth-child(2n) { animation-delay: .15s, .05s } .skelgrid .skel:nth-child(3n) { animation-delay: .3s, .05s }

/* "now streaming" strip under the video (desktop only; fills the height that lines the box up with the donation goal) */
#twitchBox .twinfo { display: flex; flex: 1 1 auto; min-height: 0; contain: size; flex-direction: column; padding: 0; overflow: hidden; background: var(--panel) }   /* contain:size = it only ever uses spare height, it never makes the box taller */
#twitchBox .twstatus { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted) }
#twitchBox .twlive { color: #ff6b78; font-weight: 800; letter-spacing: .4px }
#twitchBox .twoffline { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px }
#twitchBox .twstitle { font-size: 14.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word }
#twitchBox .twgame { font-size: 12.5px; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
@media (max-width: 900px) { #twitchBox .twinfo { display: none } }
#twitchBox .twinfoin { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px }

/* Living Pokédex background — intensity driven by completion % */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(56, 189, 248, calc(var(--dex-glow, 0) * 0.12)), transparent 70%);
  transition: background 1.2s ease;
}

/* ===== Social tab + rich profile (Krunker-inspired) ===== */
.socGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px }
.socCard { background: #0e1722; border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color .15s, transform .12s }
.socCard:hover { border-color: var(--cyan); transform: translateY(-2px) }
.socTop { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 6px }
.socPct { font-size: 22px; font-weight: 700; color: var(--cyan); margin: 4px 0 }
.socMeta { font-size: 12px; color: var(--muted) }
.socBio { font-size: 13px; margin-top: 8px; color: #cbd5e1 }
.socFoot { font-size: 11px; color: var(--muted); margin-top: 10px }

.xmodal.socialProf { width: min(720px, 96vw); max-height: 90vh; overflow: auto; padding: 0 }
.spHead { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 20px 12px; border-bottom: 1px solid var(--line) }
.spLeft { display: flex; gap: 14px; align-items: flex-start }
.spAvatar { width: 64px; height: 64px; border-radius: 16px; background: #0e1722; border: 1px solid var(--line); display: grid; place-items: center; font-size: 28px }
.spName { font-size: 22px; font-weight: 700 }
.spYou { font-size: 12px; background: var(--cyan); color: #0b1018; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle }
.spMeta { font-size: 13px; color: var(--muted); margin-top: 2px }
.spBio { margin-top: 8px; font-size: 14px; max-width: 380px }
.spActions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start }
.spStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 20px }
.spStats > div { background: #0e1722; border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center }
.spStats small { display: block; font-size: 11px; color: var(--muted) }
.spStats b { font-size: 16px }
.spBar { margin: 0 20px 12px; height: 8px }
.spTabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); padding: 0 12px }
.spTab { background: none; border: none; color: var(--muted); padding: 12px 16px; cursor: pointer; font: inherit; border-bottom: 2px solid transparent }
.spTab.active { color: #fff; border-bottom-color: var(--cyan) }
.spTabBody { padding: 16px 20px 20px }
.spSection { margin-bottom: 16px }
.goalCard { background: #0e1722; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 8px }
.goalTop { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px }
@media (max-width: 560px) {
  .spStats { grid-template-columns: repeat(2, 1fr) }
  .spHead { flex-direction: column }
}

/* Public Trade Board on Social */
.tradeBoard { display: grid; gap: 12px }
.tbCard { background: #0e1722; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px }
.tbCard.tbTwo { border-color: #22c55e66; box-shadow: 0 0 0 1px #22c55e22 }
.tbCard.tbOne { border-color: #38bdf866 }
.tbHead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.tbFoot { display: flex; gap: 8px; flex-wrap: wrap }
.xchip.hi { background: #164e3b; border-color: #22c55e88; color: #bbf7d0 }
.xtag.two { background: #14532d; color: #86efac }
button.primary { background: var(--cyan); color: #0b1018; border-color: transparent }
button.primary:hover { filter: brightness(1.08) }

/* Follow counts on profile */
.spFollows { display: flex; gap: 14px; margin-top: 8px; }
.spFollBtn { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font: inherit; text-align: left; }
.spFollBtn b { color: #fff; margin-right: 4px; }
.spFollBtn:hover { color: var(--cyan); }
.goalCard.done { border-color: #22c55e44; }
.chalList { display: grid; gap: 10px; margin-top: 10px; }

/* ===== Full Social profile (Krunker layout) ===== */
.profileHolder, #profileHolder {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}
.profBackBtn { margin-bottom: 12px; }

.profileShell.scrollItemNew,
.scrollItemNew.profileShell {
  position: relative;
  min-height: 140px;
  padding: 14px 16px;
  background: #121a24;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}

#hackText {
  display: none;
  width: 100%;
  height: calc(100% - 2px);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 50px;
  font-weight: 800;
  color: #E85656;
  text-align: center;
  margin: auto;
  line-height: 140px;
  background-color: rgba(0,0,0,0.8);
  z-index: 20;
  letter-spacing: 0.08em;
  pointer-events: none;
}

#leftProfile {
  float: left;
  width: 120px;
  position: relative;
  text-align: center;
}
.profilePic {
  width: 110px;
  height: 110px;
  border-radius: 110px;
  object-fit: cover;
  background-color: rgba(255, 255, 255, 0.12);
  display: block;
  margin: 0 auto;
  image-rendering: auto;
}
.profilePicEmoji {
  display: grid !important;
  place-items: center;
  font-size: 48px;
  line-height: 1;
}

#rightProfile {
  position: relative;
  min-height: 120px;
  margin-left: 130px;
  text-align: left;
}

.leftTopHolder {
  position: absolute;
  font-size: 20px;
  top: 8px;
  left: 0;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 2px;
  max-width: calc(100% - 90px);
}
.leftTopHolder .profileName {
  font-size: 22px;
  font-weight: 700;
  margin-left: 2px;
  line-height: 1.1;
}
.leftTopHolder .customBadge {
  /* keep badge tight against the name; multiple badges stack horizontally before the name */
}
.customBadge {
  font-size: 20px !important;
  margin-right: -4px;
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-top: -4px;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  display: inline-block;
  flex: none;
}
.customBadge + .customBadge {
  margin-left: 2px; /* small gap between consecutive badges */
}
.emojiBadge {
  display: inline-block;
  font-size: 20px !important;
  line-height: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-top: -4px;
  margin-right: -4px;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.clanLink {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 16px;
  margin-left: 4px;
}
.clanLink:hover { text-decoration: underline; color: #fff; }

.leftMidHolder {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.35);
  font-size: 14px;
}
.leftMidHolder span { color: rgba(255,255,255,0.55); }

.leftBottomHolder {
  position: absolute;
  bottom: 8px;
  left: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}
.follL {
  display: inline-block;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  margin-right: 12px;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}
.follL:hover { text-decoration: underline; color: #fff; }
.follCount {
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  margin-left: 4px;
  position: relative;
  top: 0;
}

.rightTopHolder {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 5;
  display: flex;
  gap: 4px;
  align-items: center;
}
.matIconBtn {
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  border-radius: 6px;
  display: grid;
  place-items: center;
  text-transform: lowercase;
}
.matIconBtn:hover { color: #fff; background: rgba(255,255,255,0.08); }
#flagBtn { color: #ffc147 !important; }
#flagBtn:hover { color: #ffd56a !important; background: rgba(255,193,71,0.12); }
#flagBtn .flagIco { display: block }
#reprtBtn { color: rgba(255,255,255,0.5); padding: 0 }
#reprtBtn:hover { color: #ff9aa5; background: rgba(255,120,130,0.12); }
#reprtBtn img { display: block; width: 18px; height: 18px; pointer-events: none }

.rightBottomHolder {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bottomBtn {
  padding: 5px 15px;
  font-size: 12px;
  border: solid 1px grey;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s;
  color: rgba(255,255,255,0.45);
  background: transparent;
  font: inherit;
}
.bottomBtn:hover {
  transform: scale(0.95);
  filter: contrast(1.35);
  color: #fff;
}
.bottomBtn.follow {
  color: #0b1018;
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 600;
}
.bottomBtn.follow.isFollowing {
  color: rgba(255,255,255,0.55);
  background: transparent;
  border-color: grey;
  font-weight: 500;
}
.bottomBtn.follow.isFollowing:hover {
  color: #fff;
  border-color: #fff;
}

.profileNav {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 920px;
}
.profileTabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.profileTab {
  background: none;
  border: none;
  color: var(--muted);
  padding: 12px 16px;
  font: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.profileTab:hover { color: #fff; }
.profileTab.pTabA { color: #fff; border-bottom-color: var(--cyan); }

.scrollItemNew {
  vertical-align: top;
  font-size: 15px;
  margin-bottom: 16px;
  padding: 16px 18px;
  text-align: left;
  background: #121a24;
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.scrollItemHead {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: #e2e8f0;
}

.badgeGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badgeCard {
  width: 72px;
  text-align: center;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 8px 4px;
  color: #fff;
}
.badgeCard .badgeImg {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
}
.badgeCard small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.2;
}
.badgeEmoji { font-size: 28px; }

.followList { display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.followRow {
  display: flex; align-items: center; gap: 12px;
  background: #0e1722; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; color: inherit; font: inherit; cursor: pointer; text-align: left; width: 100%;
}
.followRow:hover { border-color: var(--cyan); }
.followAv {
  width: 40px; height: 40px; border-radius: 10px; background: #121a24;
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0; font-size: 20px;
}
.followAv img { width: 100%; height: 100%; object-fit: cover; }
.followMeta { display: grid; gap: 2px; }
.followMeta small { color: var(--muted); }

@media (max-width: 640px) {
  #leftProfile { float: none; margin: 0 auto 8px; }
  #rightProfile { margin-left: 0; min-height: 160px; padding-top: 4px; }
  .leftTopHolder, .leftMidHolder, .leftBottomHolder {
    position: relative;
    left: auto; top: auto; bottom: auto;
    transform: none;
    max-width: 100%;
    margin-bottom: 8px;
  }
  .rightTopHolder { top: 4px; right: 4px; }
  .rightBottomHolder { position: relative; right: auto; bottom: auto; justify-content: flex-start; margin-top: 10px; }
  #hackText { line-height: 180px; font-size: 36px; }
}



/* Centered dialog (ban / confirm) */
.pdxDlgBack {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4, 8, 14, .78);
  display: grid; place-items: center;
  padding: 16px;
}
.pdxDlg {
  width: min(420px, 100%);
  background: var(--panel, #121a24);
  border: 1px solid var(--line, #243040);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.65);
  color: var(--text, #e8eef6);
}
.pdxDlg h2 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.pdxDlgBody { margin: 0 0 14px; color: var(--muted, #9aa8b8); font-size: 14px; line-height: 1.45; }
.pdxDlgField { display: grid; gap: 6px; margin: 0 0 16px; }
.pdxDlgLab { font-size: 12px; color: var(--muted, #9aa8b8); }
.pdxDlgField input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #243040);
  background: #0e1722;
  color: var(--text, #e8eef6);
  font: inherit; font-size: 14px;
}
.pdxDlgField input:focus { outline: none; border-color: var(--cyan, #7fe7ff); }
.pdxDlgField input.pdxDlgBad { border-color: var(--red, #f87171); }
.pdxDlgActions { display: flex; gap: 8px; justify-content: flex-end; }
.pdxDlgBtn {
  background: #111b27; border: 1px solid var(--line, #243040);
  color: var(--muted, #9aa8b8); border-radius: 10px;
  padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.pdxDlgBtn:hover { border-color: var(--cyan, #7fe7ff); color: var(--text, #e8eef6); }
.pdxDlgBtn.primary { background: #1a3a4a; border-color: var(--cyan, #7fe7ff); color: var(--text, #e8eef6); }
.pdxDlgBtn.primary.danger { background: #3a1520; border-color: #f87171; color: #fecaca; }
.pdxDlgBtn.primary.danger:hover { background: #4a1a28; }