:root {
    --bg: #05060d;
    --panel: rgba(12,18,31,0.92);
    --panel-strong: #0c1523;
    --text: #f2f5ff;
    --muted: #9ba6c2;
    --accent: #5dd4ff;
    --accent-strong: #52b7ff;
    --chip: rgba(30,38,58,0.85);
    --good: #17c964;
    --warn: #f5a524;
    --bad: #f31260;
    --border: rgba(110,130,180,0.2);
    --normal-card: #141c2b;
    --shadow-card: #241936;
    --mega-card: #1a2740;
    --space-xs: clamp(.35rem, 1vw, .5rem);
    --space-sm: clamp(.55rem, 1vw + .35rem, .85rem);
    --space-md: clamp(.9rem, 1.4vw + .6rem, 1.35rem);
    --space-lg: clamp(1.4rem, 2vw + 1rem, 2.4rem);
    --radius-md: 14px;
    --radius-lg: 22px;
}

* {
    box-sizing: border-box
}

html,body {
    height: 100%
}

body {
    margin: 0;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
}

body.no-scroll {
    overflow: hidden
}

.container {
    /* max-width:1220px; */
    /* margin:0 auto; */
    padding: var(--space-sm) clamp(1rem, 3vw, 2.5rem);
}

header h1 {
    margin: 0 0 .25rem 0;
    font-size: clamp(1.9rem, 2.3vw + 1.6rem, 3rem);
    letter-spacing: -0.02em
}

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

.footer {
    display: flex;
    gap: var(--space-sm);
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    margin-top: var(--space-lg);
    padding-top: var(--space-sm);
    color: var(--muted);
    flex-wrap: wrap;
    row-gap: var(--space-xs)
}

.footer a {
    color: var(--accent)
}

.page {
    /* max-width:1280px; */
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2.75rem) calc(var(--space-sm) * 2.5);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    /* padding-bottom: 120px; */
}

.control {
    /* display:flex; */
    /* flex-direction:column; */
    /* gap:.45rem; */
    /* background:var(--panel-strong); */
    /* padding:1rem; */
    /* border:1px solid var(--border); */
    /* border-radius:.9rem; */
    /* backdrop-filter:blur(12px); */
}

.control span,.control legend {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 600
}

.control input[type="search"],.control select {
    width: 100%;
    background: rgba(15,21,35,0.88);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: .7rem .9rem;
    transition: border-color .2s ease,box-shadow .2s ease;
}

.control input[type="search"]:focus,.control select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(93,212,255,0.25)
}

.control-wide {
    grid-column: span 1
}

.control-title {
    font-weight: 600;
    color: var(--text)
}

.toggle-group {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap
}

.hint {
    margin: 0;
    font-size: .78rem;
    color: var(--muted)
}

.btn {
    background: var(--accent-strong);
    border: none;
    color: #04111e;
    padding: .55rem 1rem;
    border-radius: .65rem;
    cursor: pointer;
    font-weight: 600;
    box-shadow: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease
}

.btn:hover {
    transform: none;
    box-shadow: none;
}

.btn-ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(93,212,255,0.45);
    box-shadow: none
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent-strong)
}

/* Copy Attackers button: solid, no glow */
#rtc-copy-search {
    background: #0e1930;
    color: #eaf2ff;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: none;
    font-weight: 700;
}
#rtc-copy-search:hover {
    border-color: rgba(255,255,255,0.22);
    color: #ffffff;
}

.status {
    margin: 0;
    padding: .85rem 1rem;
    border: none;
    /* remove white border */
    border-radius: var(--radius-md);
    flex: 1 1 auto;
    color: var(--muted);
    backdrop-filter: blur(12px);
    background: rgba(15,21,35,0.85);
}

.content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.content-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

/* Tabs for switching views */
.tabs {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: .25rem 0 var(--space-sm)
}

.tab {
    background: rgba(23,31,50,0.85);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    padding: .5rem .8rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer
}

.tab[aria-selected="true"] {
    background: #314369;
    color: #fff;
    box-shadow: 0 14px 24px rgba(6,16,30,0.45)
}

.info-section {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

/* Info button: desktop-first styling */
.info-btn {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--accent);
    border: none !important;
    box-shadow: none !important;
    border-radius: .65rem;
    /* pill on desktop */
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    padding: .45rem .65rem;
    /* space for text */
}

.info-btn:hover {
    background: var(--accent-strong);
    color: #fff;
}

.info-btn-text {
    display: inline;
}

.info-btn-icon {
    display: none;
}

.content-search {
    position: sticky;
    top: calc(env(safe-area-inset-top) + .75rem);
    z-index: 80
}

.content-search .control input[type="search"] {
    font-size: 1rem;
    box-shadow: 0 16px 36px rgba(4,10,26,0.45)
}

.cards-region {
    min-height: 420px
}

.status {
    margin: .5rem 0 1rem;
    padding: .65rem .85rem;
    border-radius: var(--radius-md);
    background: #0e1930; /* solid, no gradients */
    border: 1px solid rgba(255,255,255,0.12);
    border-left: 4px solid #5dd4ff; /* subtle accent */
    color: #eaf2ff;
    font-weight: 700;
}

.variant-toggle-bar {
    display: flex;
    gap: 0;
    text-align: center;
    border-radius: 28px;
    background: #1b2640;
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 22px 55px rgba(0,0,0,.58), /* deep ambient */ 0 8px 20px rgba(0,0,0,.35), /* mid drop */ 0 0 0 1px rgba(255,255,255,0.06) inset;
    /* subtle inner edge */
}

.variant-toggle {
    flex: 1;
    position: relative;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    padding: .9rem 1rem;
    cursor: pointer;
    font-weight: 600;
    text-transform: capitalize;
    transition: background .2s ease,color .2s ease
}

.variant-toggle:hover {
    color: #f8fbff
}

.variant-toggle[aria-pressed="true"] {
    color: #ffffff;
    background: rgba(255,255,255,0.08);
}

.variant-toggle:focus-visible,.level-toggle:focus-visible {
    outline: 2px solid rgba(93,212,255,0.55);
    outline-offset: 4px
}

.variant-toggle:first-child .variant-toggle__divider {
    display: none
}

.variant-toggle__divider {
    position: absolute;
    top: 16%;
    bottom: 16%;
    left: 0;
    width: 1px;
    background: rgba(255,255,255,0.08);
    pointer-events: none
}

.variant-toggle__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem
}

.variant-toggle__icon {
    width: 32px;
    height: 32px;
    display: block;
    background: currentColor;
    opacity: .7;
    transition: opacity .2s ease
}

.variant-toggle__label-row {
    display: flex;
    align-items: center;
    gap: .45rem
}

.variant-toggle[aria-pressed="true"] .variant-toggle__icon {
    opacity: 1
}

.variant-toggle__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
    opacity: .4
}

.variant-toggle[aria-pressed="true"] .variant-toggle__dot {
    opacity: 1
}

.variant-toggle__label {
    font-size: .9rem
}

.variant-toggle__dot--mega {
    background: #ff5050;
}

.variant-toggle__dot--shadow {
    background: #8461ff;
}

.variant-toggle__dot--legendary {
    background: #ffd45d
}

.variant-toggle__dot--party {
    background: #17c964
}

.level-toggle-bar {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.5rem
}

.level-toggle {
    flex: 1;
    background: rgba(23,31,50,0.85);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    padding: .55rem 0;
    border-radius: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease,color .2s ease,transform .2s ease
}

.level-toggle:hover {
    color: #fff
}

.level-toggle[aria-pressed="true"] {
    background: #314369;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(6,16,30,0.45)
}

.cards-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: clamp(.5rem, 1vw, 1rem);
}

@media (min-width: 1200px) {
    .cards-grid {
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr))
    }
}

.card:hover {
    transform: none;
    box-shadow: none;
}

.card--shadow {
    background: var(--shadow-card)
}

.card--mega {
    background: var(--mega-card)
}

/* Dim lower-level cards slightly for visual hierarchy */
.card--lv40,.card--lv30 {
    /* opacity: 0.6; */
}

.card-top {
    /* background:rgba(9,12,24,0.62); */
    padding: .6rem .8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-top-icons {
    position: absolute;
    top: .35rem;
    right: .5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem
}

/* Image-based variant icons */
.card-portrait img.sprite-shadow {
    filter: grayscale(100%) brightness(70%) sepia(100%) hue-rotate(-136deg) saturate(150%) contrast(1.5);
}

.variant-img {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.35))
}

.card-main .variant-img {
    position: absolute;
    bottom: .4rem;
    right: calc(.5rem + 64px);
    width: 26px;
    height: 26px
}

.card-top-icons .variant-img {
    position: static !important;
    width: 12px;
    height: 12px;
    margin-left: .25rem;
    border-radius: 50%;
    padding: 1px;
    box-sizing: content-box
}

/* Colored ring + filled background for variant images in card headers */
.card-top-icons .variant-img {
    border-radius: 50%;
    padding: 1px;
    box-sizing: content-box
}

.card-top-icons .variant-img[src*="mega-icon"] {
    border: 1px solid #ff5050;
    background-color: #ff5050
}

.card-top-icons .variant-img[src*="shadow-icon"] {
    border: 1px solid #8461ff;
    background-color: #8461ff
}

.card-top-icons .variant-img[src*="legendary-icon"] {
    border: 1px solid #ffac5d;
    background-color: #ffac5d;
}

.card-title {
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    color: #f7f9ff
}

.card-title a {
    color: inherit;
    text-decoration: none
}

.card-title a:hover {
    color: var(--accent)
}

.card-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem .8rem;
    gap: .6rem
}

.card-rank-num {
    position: absolute;
    top: .35rem;
    left: .5rem;
    font-size: .95rem;
    font-weight: 700;
    color: rgba(247,249,255,0.9)
}

.card-portrait {
    position: relative;
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center
}

.card-portrait img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.45))
}

.sprite-shadow img {
    filter: grayscale(100%) brightness(70%) sepia(100%) hue-rotate(-136deg) saturate(150%) contrast(1.5)
}

.card-score-pill {
    position: absolute;
    bottom: .35rem;
    right: .5rem;
    top: auto;
    background: rgba(6,10,22,0.65);
    border-radius: 999px;
    padding: .25rem .5rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.card--shadow .card-score-pill {
    /* background:rgba(43,17,76,0.75); */
}

.card--mega .card-score-pill {
    /* background:rgba(24,34,62,0.75); */
}

.card-score-pill span {
    font-size: .82rem;
    font-weight: 700;
    color: #f7f9ff
}

/* Level pill at bottom-left of card-main */
.card-level-pill {
    position: absolute;
    bottom: .4rem;
    left: .5rem;
    right: auto;
    background: rgba(10,13,22,.78);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    padding: .18rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
}

/* Tiny dot indicator for level (default: Lv 50) */
.card-level-pill::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: .35rem;
    border-radius: 50%;
    background: #d0b1ff;
    /* Lv 50: lavender */
    box-shadow: 0 0 0 2px rgba(208,177,255,0.18);
    vertical-align: middle;
}

/* Lv 40: soft blue */
.card--lv40 .card-level-pill::before {
    background: #8ab4ff;
    box-shadow: 0 0 0 2px rgba(138,180,255,0.18);
}

/* Lv 30: soft green */
.card--lv30 .card-level-pill::before {
    background: #7be0b5;
    box-shadow: 0 0 0 2px rgba(123,224,181,0.18);
}

/* Section titles with inline level filter */
.cards-region .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.level-filter {
    background: #0f1628;
    color: #eaf2ff;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: .25rem .5rem;
    font-weight: 700;
}

.card-moves {
    padding: .6rem .8rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .45rem
}

.move-row {
    display: flex;
    align-items: center;
    /* gap:.55rem; */
    font-weight: 700;
    font-size: .82rem;
    /* color:#fdfdff; */
    /* background:rgba(7,11,22,0.6); */
    /* padding:.45rem .65rem; */
    /* border-radius:14px; */
    /* border:1px solid rgba(255,255,255,0.05); */
}

.type-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: #0b111f;
    text-transform: uppercase
}

.type-icon--bug {
    background: #d0e562
}

.type-icon--dark {
    background: #8a7a92
}

.type-icon--dragon {
    background: #8f8afc;
    color: #130d3f
}

.type-icon--electric {
    background: #ffe760
}

.type-icon--fairy {
    background: #ffb3f0;
    color: #3e1331
}

.type-icon--fighting {
    background: #ff8d7a
}

.type-icon--fire {
    background: #ffb173
}

.type-icon--flying {
    background: #b9d3ff
}

.type-icon--ghost {
    background: #a695ff;
    color: #201054
}

.type-icon--grass {
    background: #9ae8a1
}

.type-icon--ground {
    background: #e4c57d
}

.type-icon--ice {
    background: #aee8fc;
    color: #123447
}

.type-icon--normal {
    background: #d1d1d1;
    color: #2b2b2b
}

.type-icon--poison {
    background: #d39eff;
    color: #2d134a
}

.type-icon--psychic {
    background: #ff9aca;
    color: #35061e
}

.type-icon--rock {
    background: #f1d6a5;
    color: #453519
}

.type-icon--steel {
    background: #bcd7e3;
    color: #142833
}

.type-icon--water {
    background: #8cc7ff;
    color: #0b1e3b
}

.type-icon--unknown {
    background: #d1d5db;
    color: #1f2933
}

.card-tags {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap
}

.card-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.card-score strong {
    font-size: clamp(1.25rem, .5vw + 1.2rem, 1.45rem);
    color: #fdfdff
}

.variant-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: #04070f
}

.variant-icon--mega {
    background: #ff9ad0;
    color: #2b0c25
}

.variant-icon--shadow {
    background: #8c7bff;
    color: #100431
}

.card {
    background: var(--normal-card);
    border: 1px solid rgba(93,212,255,0.12);
    border-radius: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* box-shadow:0 24px 55px rgba(4,10,20,0.6); */
    transition: transform .2s ease,box-shadow .2s ease
}

.card:hover { transform: none; box-shadow: none; }

.card--shadow {
    background: var(--shadow-card)
}

.card--mega {
    background: var(--mega-card)
}

.card-title a {
    color: inherit;
    text-decoration: none
}

.card-title a:hover {
    color: var(--accent)
}

/* Tighter titles and score pill */
.card-score-pill {
    /* background:rgba(10,13,22,.75); */
    /* border:1px solid rgba(255,255,255,.06); */
    /* border-radius:999px; */
    /* padding:.45rem .7rem; */
    /* min-width:82px; */
    /* gap:.25rem; */
}

/* Legacy chip */
.chip--legacy {
    background: rgba(20,22,30,.7);
    border: 1px solid rgba(255,255,255,.08);
    color: #cfc7ff;
    padding: .25rem .6rem;
    border-radius: .9rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em
}

/* Use image dots for type icons; hide letters */
.type-icon {
    font-size: 0;
    /* background-color: rgba(12,18,31,.8); */
    border: 1px solid rgba(255,255,255,.08);
    background-size: 85% 85%;
    background-position: center;
    background-repeat: no-repeat
}

.type-icon--bug {
    background-image: url('/assets/bug.png')
}

.type-icon--dark {
    background-image: url('/assets/dark.png')
}

.type-icon--dragon {
    background-image: url('/assets/dragon.png')
}

.type-icon--electric {
    background-image: url('/assets/electric.png')
}

.type-icon--fairy {
    background-image: url('/assets/fairy.png')
}

.type-icon--fighting {
    background-image: url('/assets/fighting.png')
}

.type-icon--fire {
    background-image: url('/assets/fire.png')
}

.type-icon--flying {
    background-image: url('/assets/flying.png')
}

.type-icon--ghost {
    background-image: url('/assets/ghost.png')
}

.type-icon--grass {
    background-image: url('/assets/grass.png')
}

.type-icon--ground {
    background-image: url('/assets/ground.png')
}

.type-icon--ice {
    background-image: url('/assets/ice.png')
}

.type-icon--normal {
    background-image: url('/assets/normal.png')
}

.type-icon--poison {
    background-image: url('/assets/poison.png')
}

.type-icon--psychic {
    background-image: url('/assets/psychic.png')
}

.type-icon--rock {
    background-image: url('/assets/rock.png')
}

.type-icon--steel {
    background-image: url('/assets/steel.png')
}

.type-icon--water {
    background-image: url('/assets/water.png')
}

.type-icon--unknown {
    background-image: url('/assets/unknown.png')
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: .75rem;
    border: 1px solid rgba(93,212,255,0.25);
    background: rgba(15,21,35,0.7);
    color: var(--muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em
}

.badge.good {
    background: #0e1a12;
    color: #b7f7c7;
    border-color: #16351f
}

.badge.legacy {
    background: #1a1820;
    color: #e5d3ff;
    border-color: #2d2941
}

.row {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-wrap: wrap
}

.moves {
    white-space: normal
}

.hidden {
    display: none
}

/* Ensure tab panels remain hidden even if layout rules target their IDs */
#raid-team-counter.hidden {
    display: none !important
}

/* Ensure type filter bar can be force-hidden when on Counter tab */
.type-filter-bar.hidden {
    display: none !important
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

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

/* Mobile filters panel removed */
#list-view a {
    color: inherit;
    text-decoration: none
}

/* Use PNG assets for variant toggle icons */
.variant-toggle__icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    mask: none !important;
    -webkit-mask: none !important;
}

.variant-toggle__icon--mega {
    background-image: url('/assets/mega-icon.png') !important;
    opacity: .6;
}

.variant-toggle__icon--shadow {
    background-image: url('/assets/shadow-icon.png') !important;
    opacity: .6;
}

.variant-toggle__icon--legendary {
    background-image: url('/assets/legendary-icon.png') !important;
    opacity: .6;
}

.variant-toggle__icon--party {
    background-image: url('/assets/group-icon.png') !important;
    opacity: .6;
}

@media (min-width: 768px) {
    .variant-toggle__icon {
        width:24px;
        height: 24px
    }
}

/* Party Power toggle styles */
.variant-toggle--party .variant-toggle__icon {
    background: none;
    opacity: 1
}

.variant-toggle--party .variant-toggle__icon svg {
    width: 22px;
    height: 22px;
    display: block
}

@media (min-width: 768px) {
    .variant-toggle--party .variant-toggle__icon svg {
        width:24px;
        height: 24px
    }
}

.variant-toggle--party .variant-toggle__dot {
    background: #4ade80
}

.variant-toggle--party[aria-pressed="true"] {
    /* color:#4ade80; */
}

/* Sticky toggle bars (all viewports) */
.footer {
    padding-bottom: calc(env(safe-area-inset-bottom) + 80px);
}

/* scroll space below footer so sticky bars don't cover */
.variant-toggle-bar, .level-toggle-bar {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 1000;
    border-radius: var(--radius-lg);
    /* box-shadow:0 14px 40px rgba(0,0,0,.38); */
    width: min(100% - 1.5rem, 620px);
    margin-left: auto;
    margin-right: auto;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
}

.variant-toggle-bar {
    bottom: calc(env(safe-area-inset-bottom) + 12px);
}

.level-toggle-bar {
    bottom: calc(env(safe-area-inset-bottom) + 76px)
}

/* Type filter icon bar */
.type-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: .25rem 0 .15rem;
    margin-inline:-.25rem;overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch
}

.type-filter-bar::-webkit-scrollbar {
    display: none
}

.type-filter-btn {
    appearance: none;
    background: rgb(23 31 50 / 0%);
    border: 1px solid rgb(110 130 180 / 0%);
    /* border-radius:16px; */
    padding: 0 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    flex: 0 0 auto;
    scroll-snap-align: center;
    /* min-width:48px; */
}

.type-filter-btn:active {
    transform: translateY(1px)
}

.type-filter-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(12,18,31,.85);
    /* border:1px solid rgba(255,255,255,.08); */
    background-size: 85% 85%;
    background-position: center;
    background-repeat: no-repeat
}

@media (min-width: 768px) {
    .type-filter-icon {
        width:36px;
        height: 36px
    }
}

/* Map icons to assets */
.type-filter-icon--all {
    background-image: url('/assets/unknown.png')
}

.type-filter-icon--bug {
    background-image: url('/assets/bug.png')
}

.type-filter-icon--dark {
    background-image: url('/assets/dark.png')
}

.type-filter-icon--dragon {
    background-image: url('/assets/dragon.png');
}

.type-filter-icon--electric {
    background-image: url('/assets/electric.png')
}

.type-filter-icon--fairy {
    background-image: url('/assets/fairy.png')
}

.type-filter-icon--fighting {
    background-image: url('/assets/fighting.png')
}

.type-filter-icon--fire {
    background-image: url('/assets/fire.png')
}

.type-filter-icon--flying {
    background-image: url('/assets/flying.png')
}

.type-filter-icon--ghost {
    background-image: url('/assets/ghost.png')
}

/* Split Ghost/Dark icon: left = Ghost, right = Dark */
.type-filter-icon--ghostdark {
    background-image: url('/assets/dark.png'), url('/assets/ghost.png');
    background-repeat: no-repeat, no-repeat;
    background-position: left 10px center, right 10px center;
    /* nudge inward so halves don’t clip */
    background-size: 75%;
    position: relative;
}

.type-filter-icon--ghostdark::after {
    content: "";
    position: absolute;
    inset: 6px 50% 6px auto;
    /* vertical divider */
    width: 1px;
    border-right: 1px solid rgba(255,255,255,0.18);
}

.type-filter-icon--grass {
    background-image: url('/assets/grass.png')
}

.type-filter-icon--ground {
    background-image: url('/assets/ground.png')
}

.type-filter-icon--ice {
    background-image: url('/assets/ice.png')
}

.type-filter-icon--normal {
    background-image: url('/assets/normal.png')
}

.type-filter-icon--poison {
    background-image: url('/assets/poison.png')
}

.type-filter-icon--psychic {
    background-image: url('/assets/psychic.png')
}

.type-filter-icon--rock {
    background-image: url('/assets/rock.png')
}

.type-filter-icon--steel {
    background-image: url('/assets/steel.png')
}

.type-filter-icon--water {
    background-image: url('/assets/water.png')
}

/* Dim others when any type is selected */
.type-filter-bar.--active .type-filter-btn[aria-pressed="false"] {
    opacity: .35;
}

.type-filter-bar.--active .type-filter-btn[aria-pressed="true"] {
    opacity: 1;
}

/* Responsive refinements */
@media (min-width: 480px) {
    .content-header {
        flex-direction:row;
        align-items: center;
        justify-content: space-between
    }

    .status {
        max-width: 420px
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill,minmax(210px,1fr))
    }
}

@media (min-width: 680px) {
    .footer {
        margin-bottom: calc(env(safe-area-inset-bottom) + 140px);
    }

    /* a bit more space on narrow screens */
    .cards-grid {
        grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
    }

    .variant-toggle-bar,.level-toggle-bar {
        width: min(100% - 3rem, 680px)
    }

    .type-filter-bar {
        justify-content: center;
        overflow-x: visible;
        margin-inline:0}
}

@media (min-width: 900px) {
    .content {
        /* gap:calc(var(--space-lg) * 1.1); */
    }

    .content-header {
        align-items: flex-end
    }

    .content-search {
        position: static
    }

    .content-search .control input[type="search"] {
        box-shadow: 0 12px 28px rgba(4,10,26,0.25)
    }

    .cards-grid {
        /* gap:1.4rem; */
    }

    .card {
        border-radius: 24px
    }

    .card-main {
        padding: 1rem 1.1rem
    }
}

@media (max-width: 540px) {
    .page {
        padding-inline:clamp(.75rem, 4vw, 1.5rem)
    }

    .container {
        /* padding-inline:clamp(.75rem, 4vw, 1.5rem); */
    }

    header h1 {
        font-size: clamp(1.7rem, 5vw + 1rem, 2.4rem)
    }

    .content-search {
        top: calc(env(safe-area-inset-top) + .35rem)
    }

    .status {
        font-size: .9rem
    }

    .controls-grid {
        grid-template-columns: 1fr
    }

    .variant-toggle-bar {
        /* gap:.4rem; */
        /* padding-block:.5rem; */
        height: 56px;
    }

    .variant-toggle__divider {
        display: none
    }

    .variant-toggle__label-row {
        gap: .35rem
    }

    .variant-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0
    }

    .variant-toggle__dot {
        display: none
    }

    .variant-toggle__icon {
        width: 26px;
        height: 26px;
        transition: box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease
    }

    .variant-toggle[aria-pressed="true"] .variant-toggle__icon {
        border-radius: 999px;
        border: 1px solid transparent;
        /* box-shadow:0 6px 16px rgba(4,12,26,0.3); */
    }

    .variant-toggle--party[aria-pressed="true"] .variant-toggle__icon {
        background-color: #4ade80;
        border-color: #4ade80;
        color: #4ade80;
        /* box-shadow:0 6px 16px rgba(74,222,128,0.35); */
    }

    .variant-toggle[aria-pressed="true"] .variant-toggle__icon--mega {
        background-color: rgba(255,80,80,1);
        border-color: rgba(255,80,80,1);
        /* box-shadow:0 6px 16px rgba(255,80,80,0.35); */
    }

    .variant-toggle[aria-pressed="true"] .variant-toggle__icon--shadow {
        background-color: rgb(132 97 255);
        border-color: rgb(132 97 255);
        /* box-shadow:0 6px 16px rgba(132,97,255,0.35); */
    }

    .variant-toggle[aria-pressed="true"] .variant-toggle__icon--legendary {
        background-color: rgb(255 212 93);
        border-color: rgb(255 212 93);
        /* box-shadow:0 6px 16px rgba(255,212,93,0.35); */
    }

    .variant-toggle[aria-pressed="true"] .variant-toggle__icon--party {
        background-color: #4ade80;
        border-color: #4ade80;
        /* box-shadow:0 6px 16px rgba(255,212,93,0.35); */
    }

    .card-portrait {
        width: 96px;
        height: 96px
    }

    .card-main {
        gap: .5rem
    }

    .card-score strong {
        font-size: 1.2rem
    }

    .card-score-pill {
        min-width: auto
    }

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

@media (min-width: 1200px) {
    .cards-grid {
        grid-template-columns:repeat(5, minmax(0,1fr));
    }
}

/* Prevent wrapping; truncate with ellipsis */
.card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.move-row {
    min-width: 0;
}

.move-row > :last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legacy move styling */
.move-row em {
    font-style: italic
}

.move-row .legacy-star {
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    margin-right: .25rem
}

/* preserve ellipsis with nested elements */
/* Ensure legacy star + italics render and truncate correctly */
.move-label {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.move-label em {
    font-style: italic !important
}

.move-label .legacy-star {
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    margin-right: .25rem;
}

/* Info dialog styles */
.info-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: max(env(safe-area-inset-top),16px) 12px max(env(safe-area-inset-bottom),16px);
}

/* Raid Counters lightweight loader */
#rtc-loading {
    background: #0e1930; /* solid, no gradients */
    border: 1px solid rgba(255,255,255,0.12);
    border-left: 4px solid #5dd4ff;
    color: #eaf2ff !important;
    font-weight: 700;
    padding: .45rem .65rem;
    border-radius: 10px;
    display: inline-block;
}
#rtc-loading.hidden { display: none; }

.info-dialog.hidden {
    display: none;
}

.info-dialog-content {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    width: min(92vw, 640px);
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 100px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--text);
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

.info-dialog-content h2 {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    font-size: 1.2rem;
    color: var(--accent);
}

#.info-dialog-content p {
    # margin: .5rem 0;
    # font-size: .95rem;
    # line-height: 1.5;
    #}

/* Example preview inside info dialog */
.example-card-host {
    position: relative;
    margin-top: .5rem;
    max-width: 200px;
}

.example-clone {
    pointer-events: none;
    filter: none
}

/* Highlight target sections when hovering legend or card */
.ex-target {
    transition: box-shadow .15s ease, outline-color .15s ease, background-color .15s ease
}

.ex-target.is-highlighted {
    outline: 2px solid rgba(93,212,255,.8);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(93,212,255,.18);
    background-color: rgba(93,212,255,.08);
    border-radius: 10px;
}

/* Tooltip for section names */
.example-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%,-100%);
    background: rgba(5,6,13,.95);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .5rem;
    padding: .25rem .45rem;
    font-size: .78rem;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 10;
}

.example-tooltip.visible {
    opacity: 1
}

/* Variant toggle help tip */
.variant-tip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 92px);
    /* above sticky bars */
    width: min(100% - 1.5rem, 620px);
    margin-left: auto;
    margin-right: auto;
    background: rgba(12,18,31,0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: .6rem .85rem;
    color: var(--text);
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    z-index: 1100;
    /* above bars */
}

.variant-tip p {
    margin: 0 23px 0 0;
    font-size: .9rem;
    line-height: 1.35;
    color: #d5ff3a;
}

.variant-tip__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer
}

.variant-tip__close:hover {
    border-color: rgba(255,255,255,0.28)
}

.variant-tip__close svg {
    width: 16px;
    height: 16px;
    display: block
}

/* Small pointer arrow pointing to the bar */
.variant-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    border: 8px solid transparent;
    border-top-color: rgba(255,255,255,0.12)
}

.variant-tip::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -7px;
    border: 7px solid transparent;
    border-top-color: rgba(12,18,31,0.96)
}

@media (max-width: 540px) {
    .variant-tip {
        width:min(100% - 1rem, 560px);
        bottom: calc(env(safe-area-inset-bottom) + 80px);
        padding: .55rem .8rem
    }

    .variant-tip p {
        font-size: .88rem
    }
}

/* Top-right close X for info dialog */
.info-close-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
}

.info-close-x:hover {
    border-color: rgba(255,255,255,0.28)
}

.info-close-x svg {
    width: 18px;
    height: 18px;
    display: block
}

#info-close {
    display: none
}

@media (min-width: 720px) {
    .info-dialog-content {
        max-width:640px
    }
}

@media (max-width: 540px) {
    .info-btn {
        width:28px;
        height: 28px;
        padding: 0;
        /* remove extra padding */
        border-radius: 50%;
        /* circle on mobile */
        justify-content: center;
    }

    .info-btn-text {
        display: none;
    }

    .info-btn-icon {
        display: inline;
    }
}

@media (max-width: 540px) {
    .info-dialog {
        align-items:flex-start;
        padding: 24px 16px max(env(safe-area-inset-bottom),24px)
    }

    .info-dialog-content {
        position: relative;
        width: calc(100% - 12px * 2);
        /* horizontal margins */
        margin: 0 auto;
        /* center */
        max-width: none;
        border-radius: 18px;
        padding: clamp(12px, 3vw + 10px, 18px);
        font-size: .9rem;
    }
}

span.small {
    font-size: 0.75rem;
}

ul#example-legend {
    padding-inline-start: 15px; }

/* Raid Team Counter */
#raid-team-counter {
    /* margin-top: var(--space-lg); */
}

.rtc-row {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.rtc-controls {
    gap: var(--space-sm);
}

.rtc-boss-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    width: 100%
}

.rtc-boss-group {
    flex: 1 1 100%;
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
    margin: .25rem 0 .1rem
}

.rtc-boss-btn {
    flex: 0 0 auto
}

.rtc-boss-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .35rem .5rem;
    border: 1px solid var(--border);
    background: rgba(15,21,35,0.88);
    border-radius: 12px;
    cursor: pointer
}

.rtc-boss-btn {
    position: relative;
    min-width: 110px;
}

.rtc-boss-thumb {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px
}

.rtc-boss-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35))
}

.rtc-variant-badge {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    padding: .5px;
    box-sizing: content-box;
    z-index: 2
}

.rtc-variant-badge[src*="mega-icon"] {
    border: 1px solid #ff5050;
    background-color: #ff5050
}

.rtc-variant-badge[src*="shadow-icon"] {
    border: 1px solid #8461ff;
    background-color: #8461ff
}

/* Time-left badge restored to pill at top-right */
.rtc-boss-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: .7rem;
    font-weight: 800;
    padding: .1rem .35rem;
    border-radius: 999px;
    /* border:1px solid rgba(255,255,255,.18); */
    /* background:rgba(15,21,35,0.9); */
    color: #9cc3ff;
    z-index: 2
}

.rtc-boss-badge.rtc-dates {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
    letter-spacing: 0;
    text-align: right;
    white-space: nowrap;
    line-height: 1;
}

.rtc-boss-badge.rtc-dates:after {
    content: none !important;
}

.rtc-boss-badge--ok {
    color: #22c55e
}

.rtc-boss-badge--soon {
    color: #f59e0b
}

.rtc-boss-badge--past {
    color: #94a3b8
}

.rtc-boss-btn[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(93,212,255,0.2) inset
}

.rtc-boss-btn img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35))
}

.rtc-boss-btn .rtc-variant-badge {
    width: 10px !important;
    height: 10px !important;
    position: absolute;
    bottom: 28px;
    right: 6px;
    padding: 0;
    object-fit: contain;
    pointer-events: none
}

.rtc-boss-btn span {
    font-size: .8rem;
    color: var(--muted);
    font-weight: 700
}

.rtc-input, .rtc-select {
    background: rgba(15,21,35,0.88);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: .6rem .8rem;
}

.rtc-input {
    min-width: 220px;
}

.rtc-select {
    min-width: 220px;
}

/* Summary for boss + weakness icons */
.rtc-summary {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .6rem 1rem;
    padding: .8rem 1rem;
    background: #ff505030;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* Ensure scrollIntoView leaves room below tabs/header */
    scroll-margin-top: 80px;
}

.rtc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem .5rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: .4rem
}

.rtc-head-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.rtc-boss-name {
    font-size: 1.4rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .01em;
    margin-top: .15rem
}

.rtc-types--inline {
    display: inline-flex;
    /* gap:.25rem; */
    vertical-align: middle;
    /* margin-left:.35rem; */
}

.rtc-boss-name + .rtc-line--weak {
    margin-top: .65rem
}

.rtc-types {
    /* display:flex; */
    /* gap:.25rem; */
    /* margin-top:.25rem; */
}

.rtc-head-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto
}

.rtc-egg-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35))
}

/* Make sprite wrapper span the full header-left width so badges align to block right */
.rtc-boss-sprite-wrap {
    position: relative;
    display: block;
    width: 100%
}

/* Match card variant icon styling in summary sprite */
.rtc-boss-sprite-wrap .variant-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: block;
    padding: 1px;
    box-sizing: content-box
}

.rtc-boss-sprite-wrap .variant-img.variant-img--shiny {
    /* right:0; */
    /* border:1px solid #ffd45d; */
    /* background-color:#ffd45d; */
}

.rtc-boss-sprite-wrap .variant-img[src*="shadow-icon"] {
    right: 22px;
    border: 1px solid #8461ff;
    background-color: #8461ff
}

.rtc-boss-sprite-wrap .variant-img[src*="legendary-icon"] {
    border: 1px solid #ffd45d;
    background-color: #ffd45d
}

.rtc-boss-sprite {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
    margin-bottom: .35rem
}

.rtc-boss-sprite-wrap--shadow .rtc-boss-sprite {
    /* Add a subtle purple glow for shadow bosses */
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(132,97,255,.65)) drop-shadow(0 0 36px rgba(132,97,255,.35));
}

.rtc-boss-sprite.sprite--normal {
    position: relative;
    z-index: 1;
    transition: opacity .15s ease
}

.rtc-boss-sprite.sprite--shiny {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity .15s ease
}

/* Only apply hover reveal on devices that support hover */
@media (hover: hover) {
    .rtc-boss-sprite-wrap:hover .sprite--normal {
        opacity:0
    }

    .rtc-boss-sprite-wrap:hover .sprite--shiny {
        opacity: 1
    }
}

/* Tap/keyboard toggle support */
.rtc-boss-sprite-wrap.show-shiny .sprite--normal {
    opacity: 0
}

.rtc-boss-sprite-wrap.show-shiny .sprite--shiny {
    opacity: 1
}

.rtc-summary-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 1rem;
    align-items: start
}

.rtc-col-left {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.rtc-col-right {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0
}

.rtc-sprite {
    /* min-height: 140px; */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start
}

.rtc-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.rtc-weakpill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: .35rem .6rem;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.rtc-weakpill .label {
    color: var(--muted);
    font-weight: 700;
    font-size: .75rem;
}

.rtc-weakpill .icons {
    display: flex;
    gap: .15rem;
    align-items: center;
    flex-wrap: wrap
}

.rtc-egg-block {
    position: relative;
    display: inline-block
}

.rtc-cp-pill {
    position: absolute;
    /* left: -3px; */
    /* bottom: 26px; */
    background: rgba(25,31,50,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: .15rem .5rem;
    display: inline-flex;
    gap: .35rem;
    align-items: center
}

.rtc-cp-pill .label {
    font-size: .8rem;
    color: var(--muted);
    font-weight: 700
}

.rtc-cp-pill .value {
    font-weight: 800
}

.rtc-hundo-panel {
    position: relative;
    background: rgba(49,67,105,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: .6rem .8rem;
    display: flex;
    flex-direction: column;
    /* gap:.4rem; */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box
}

.rtc-hundo-panel .rtc-hundo-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    min-width: 0
}

.rtc-hundo-panel .rtc-hundo-line .label {
    color: var(--muted);
    font-weight: 800;
    letter-spacing: .04em;
    font-size: .75rem;
}

.rtc-hundo-panel .rtc-hundo-line .num {
    font-weight: 900;
    font-size: 1rem;
}

.rtc-hundo-sticker {
    position: absolute;
    right: -10px;
    top: -18px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.35))
}

.rtc-duration {
    margin-top: 1.5rem;
}

.rtc-duration strong {
    color: #9cc3ff;
    font-weight: 600;
    margin-right: .5rem
}

.rtc-summary .rtc-dates {
    display: inline;
    letter-spacing: 0;
    text-transform: none;
    opacity: .95
}

.rtc-summary .rtc-boss-sprite-wrap .variant-img {
    left: 0;
    /* right:auto; */
}

.rtc-summary .rtc-boss-sprite-wrap .variant-img.variant-img--shiny {
    left: -12px;
    top: -8px;
    /* right:auto; */
}

/* Temporarily hide raid egg + CP in summary */
.rtc-summary .rtc-egg-block {
    display: none !important
}

.rtc-summary .rtc-cp-pill {
    display: none !important
}

.rtc-summary .rtc-raidcp {
    display: none !important
}

/* Hide Shadow badge in summary only */
.rtc-summary .rtc-boss-sprite-wrap .variant-img[src*="shadow-icon"] {
    display: none !important
}

.rtc-raidcp {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .25rem .5rem;
    min-width: 72px
}

.rtc-raidcp .label {
    font-size: .7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em
}

.rtc-raidcp .value {
    font-size: 1rem;
    color: var(--text);
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

.rtc-line--hundo {
    gap: .5rem
}

.rtc-line--hundo .wb {
    margin-left: .5rem
}

.rtc-wb-icons {
    display: inline-flex;
    /* gap:.25rem; */
    /* margin-left:.35rem; */
}

.wb-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: .8;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.2))
}

.rtc-hundo-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: .95;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25))
}

.rtc-line {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    min-height: 24px;
}

.rtc-line--weak {
    align-items: flex-start;
    row-gap: .12rem;
    column-gap: 0
}

.rtc-line--weak .weak-chip {
    margin-right: 0;
    padding: 0;
    gap: 0
}

.rtc-line--weak .type-icon {
    width: 20px;
    height: 20px
}

.rtc-line strong {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
}

.rtc-line span, .rtc-line .small {
    font-size: .95rem;
    color: var(--text);
}

.rtc-line .type-icon {
    width: 24px;
    height: 24px;
}

/* Inline weakness chip: icon + small multiplier */
.weak-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    /* margin-right:.35rem; */
    /* padding:.1rem .2rem; */
    border-radius: 8px;
}

.weak-chip .weak-mult {
    font-size: .8rem;
    color: var(--muted)
}

/* Desktop: stack labels above values for clean, minimal cards */
@media (min-width: 900px) {
    /* Two-column desktop layout: summary 33%, results 66% */ #raid-team-counter {
        display:grid;
        grid-template-columns: 1fr 2fr;
        gap: 1rem;
        align-items: start;
        grid-auto-rows: auto
    }

    #raid-team-counter .rtc-controls {
        display: contents;
    }

    #raid-team-counter #boss-list {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    #raid-team-counter #rtc-summary {
        grid-column: 1;
        /* grid-row: 2 / span 2; */
        align-self: stretch;
    }

    #raid-team-counter #rtc-results {
        grid-column: 2;
        grid-row: 2 / span 2;
    }

    #raid-team-counter #rtc-results.cards-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .rtc-summary {
        gap: .75rem 1rem;
        grid-template-columns: 1fr;
        position: relative;
    }

    .rtc-line {
        flex-direction: row;
        align-items: center;
        gap: .4rem;
        min-height: 24px;
    }

    .rtc-line strong {
        font-size: .85rem;
        text-transform: none;
        letter-spacing: 0
    }

    .rtc-line.rtc-line--hundo {
        flex-direction: row;
        align-items: center
    }

    .rtc-head + .rtc-line {
        /* margin-top: .5rem; */
    }

    /* Bigger boss sprite and egg on desktop */
    .rtc-boss-sprite {
        width: 144px;
        height: 144px
    }

    /* Make egg larger in summary like the mock */
    .rtc-summary .rtc-egg-img {
        width: 116px;
        height: 116px;
    }

    /* Tighten type icon spacing under name */
    .rtc-head-left .rtc-types {
        gap: .2rem;
        margin-top: .2rem
    }

    .rtc-head-left .type-icon {
        width: 20px;
        height: 20px
    }

    /* Hide standalone types row when inline types are present */
    .rtc-head-left > .rtc-types {
        display: none
    }

    /* Relayout Hundo: move to top-right under egg and stack numbers under icon */
    .rtc-hundo-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .35rem;
        margin-top: .4rem
    }

    .rtc-hundo-icon {
        width: 72px;
        height: 72px
    }

    .rtc-hundo-row {
        display: flex;
        align-items: center;
        gap: .35rem
    }

    .rtc-hundo-row strong {
        font-size: .7rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .04em
    }

    .rtc-hundo-row span {
        font-weight: 800;
        font-variant-numeric: tabular-nums
    }

    /* Match Hundo CP block styling to raidcp */
    .rtc-hundo-cps {
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: .35rem .6rem;
        min-width: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .25rem
    }

    /* Redesigned summary grid (desktop still fine) */
    .rtc-summary-grid {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: 1rem;
        align-items: start
    }
}

@media (max-width: 680px) {
    html, body {
        overflow-x:hidden;
    }

    .container, .page, .content, #raid-team-counter {
        max-width: 100vw;
        box-sizing: border-box;
    }

    #raid-team-counter {
        overflow-x: hidden;
    }

    #raid-team-counter .rtc-controls {
        max-width: 100%;
        overflow: hidden;
    }

    #raid-team-counter .rtc-row {
        min-width: 0;
    }

    /* Larger scroll offset on mobile */
    .rtc-summary {
        scroll-margin-top: 120px;
    }

    /* Boss list: 3 across grid on mobile */
    #raid-team-counter .rtc-boss-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: .5rem;
    }

    /* Group headers span full row; keep spacing tight */
    #raid-team-counter .rtc-boss-group {
        grid-column: 1 / -1;
        display: block;
        margin: .2rem 0 .1rem;
        padding: 0;
        font-size: .75rem;
        line-height: 1.1;
    }

    #raid-team-counter .rtc-boss-btn {
        width: 100%;
    }

    /* Slightly tighter boss chips on mobile so more fit on screen */
    .rtc-boss-btn {
        padding: .25rem .4rem;
    }

    .rtc-boss-btn span {
        max-width: 92px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Keep summary within viewport and stack vertically */
    .rtc-summary {
        grid-template-columns: 1fr;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .rtc-boss-name {
        font-size: 1.25rem
    }

    /* Make raid egg larger and closer to sprite on mobile */
    .rtc-egg-img {
        width: 90px;
        height: 90px;
    }

    .rtc-egg-block {
        margin-top: 8px;
    }

    /* Mobile: match Hundo block styling to Raid Egg block */
    .rtc-hundo-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .35rem
    }

    .rtc-hundo-icon {
        width: 44px;
        height: 44px;
        display: block;
        object-fit: contain
    }

    .rtc-hundo-cps {
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: .25rem .5rem;
        min-width: 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .15rem;
        text-align: center
    }

    .rtc-hundo-row strong {
        margin-right: .3rem
    }

    /* Mobile: place shiny badge at far right of sprite block, shadow just to its left */
    .rtc-boss-sprite-wrap {
        display: block;
        width: 100%;
    }

    .rtc-boss-sprite-wrap .variant-img {
        top: 0;
    }

    .rtc-boss-sprite-wrap .variant-img.variant-img--shiny {
        right: 0;
    }

    .rtc-boss-sprite-wrap .variant-img[src*="shadow-icon"] {
        right: 22px;
    }

    /* Two cards across on mobile; clamp width to viewport */
    #raid-team-counter .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        gap: .65rem;
    }

    #raid-team-counter .card {
        max-width: 100%;
        min-width: 0;
    }

    #raid-team-counter .card-main, #raid-team-counter .card-moves, #raid-team-counter .move-row {
        min-width: 0;
    }

    #raid-team-counter .move-row > :last-child {
        min-width: 0;
    }
}

@media (max-width: 540px) {
    .rtc-input, .rtc-select {
        flex:1 1 100%;
        min-width: unset;
    }
}

/* Full-width, bold/blue dates line */
.rtc-dates {
    width: 100%;
    font-weight: 600;
    /* font-size: .75rem; */
    color: var(--accent);
    text-transform: uppercase;
    /* letter-spacing:.14em; */
    opacity: .69;
    text-align: justify;
    display: block
}

.rtc-dates.rtc-dates--ok {
    color: #22c55e
}

.rtc-dates.rtc-dates--soon {
    color: #f59e0b
}

.rtc-dates.rtc-dates--past {
    color: var(--muted);
    opacity: .65
}

.rtc-dates:after {
    /* content: ''; */
    /* display: inline-block; */
    /* width: 100%; */
}

.info-inline {
    display: flex;
    align-items: flex-start;
    gap: .4rem
}

.info-inline svg {
    width: 14px;
    height: 14px;
    margin-top: .15rem;
    opacity: .75
}

.info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    color: #0b111f;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    opacity: .85;
    margin-top: .1rem
}

.help-btn-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: .25rem 0 .5rem
}

.help-btn-row .info-badge {
    cursor: pointer
}

/* Minimal dialog close button in top-right */
.info-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000
}

.info-dialog.hidden {
    display: none
}

.info-dialog-content {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    max-width: 520px;
    margin: 0 1rem
}

.info-dialog-title {
    margin: 0 0 .5rem 0
}

.info-dialog-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
    color: var(--muted);
    cursor: pointer
}

.info-dialog-close::before {
    content: '\00D7';
    font-size: 18px;
    line-height: 1
}

.info-dialog-close:hover {
    color: #fff;
    border-color: rgba(255,255,255,.2)
}

.tabs.tabs--with-help {
    display: flex;
    align-items: center;
    gap: .5rem
}

.tabs.tabs--with-help #rtc-help-btn {
    margin-left: auto
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--muted);
    cursor: pointer
}

.icon-btn svg {
    display: block;
    width: 22px;
    height: 22px;
}

.icon-btn:hover {
    color: #fff
}

/* Marketing additions */
.hero-sub {
    color: var(--muted);
    margin: .25rem 0 .75rem
}

.hero-cta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

.marketing {
    margin-top: .5rem
}

.value-props {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .5rem
}

@media(min-width: 720px) {
    .value-props {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

.value-props li {
    background: rgba(15,21,35,.75);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: .75rem .9rem
}

.faq details {
    background: rgba(15,21,35,.75);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: .75rem .9rem;
    margin: .5rem 0
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text)
}

.share-cta {
    margin-top: .75rem
}

.small {font-size:small;}