:root {
    --ink: #000;
    --muted: #222;
    --line: #111;
    --soft-line: #d8d8d8;
    --surface: #fff;
    --footer: #f4f4f4;
    --button: #2f3f57;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-width: 320px;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

a {
    color: #04e;
}

.header {
    min-height: 92px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 6px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 82px;
    max-width: 420px;
    width: auto;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.nav a,
.nav-more summary,
.header-right a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
}

.nav a:hover,
.nav a.active,
.nav-more summary:hover {
    text-decoration: underline;
}

.nav-more {
    position: relative;
}

.nav-more summary {
    list-style: none;
    cursor: pointer;
}

.nav-more summary::-webkit-details-marker {
    display: none;
}

.nav-more summary::after {
    content: " v";
}

.nav-more div {
    position: absolute;
    z-index: 20;
    top: calc(100% + 10px);
    right: 0;
    min-width: 160px;
    padding: 8px;
    border: 1px solid #b7c5d8;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}

.nav-more:not([open]) div {
    display: none;
}

.nav-more div a {
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
}

.nav-more div a:hover {
    background: #f3f6fb;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.money,
.button,
.user-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid #7c8798;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.money {
    color: #5a3900;
    background: #fff7d8;
    border-color: #f2c64d;
}

.button,
.user-btn {
    cursor: pointer;
}

.button:disabled {
    cursor: default;
    opacity: .6;
}

.button-primary,
.user-btn {
    color: #fff;
    background: var(--button);
    border-color: var(--button);
}

.user-dropdown {
    position: relative;
}

.user-dropdown summary {
    list-style: none;
}

.user-dropdown summary::-webkit-details-marker {
    display: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    width: 230px;
    background: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    z-index: 30;
}

.user-dropdown[open] .dropdown-content {
    display: block;
}

.dropdown-header {
    color: #fff;
    background: #222;
    padding: 12px;
    line-height: 1.45;
}

.dropdown-content a {
    display: block;
    padding: 10px 12px;
    color: #04e;
    text-decoration: underline;
}

.dropdown-content a:hover {
    background: #f3f3f3;
}

.divider {
    height: 1px;
    background: var(--soft-line);
}

.session-warning {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(255, 255, 255, .82);
    z-index: 1000;
}

.session-warning[hidden] {
    display: none;
}

.session-warning-box {
    width: min(100%, 420px);
    padding: 18px;
    background: #fff;
    border: 1px solid #111;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    text-align: center;
}

.session-warning-box h2 {
    margin-bottom: 8px;
}

.session-warning-box p {
    margin-bottom: 14px;
    line-height: 1.4;
}

.content {
    flex: 1;
    width: min(100%, 1160px);
    margin: 0 auto;
    padding: 34px 24px 56px;
}

.text-page {
    max-width: 1080px;
    margin: 0 auto;
    color: #000;
}

.text-page h1 {
    margin-bottom: 14px;
    text-align: center;
    font-size: 22px;
    line-height: 1.25;
}

.text-page h2 {
    margin-bottom: 8px;
    font-size: 16px;
}

.member-line {
    text-align: center;
    font-weight: 700;
}

.text-page p {
    margin: 0 0 16px;
    line-height: 1.35;
}

.home-sections {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
    gap: 24px;
    margin: 24px 0 18px;
    padding-top: 14px;
    border-top: 1px solid var(--soft-line);
}

.home-block {
    min-width: 0;
}

.updates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.updates-table th,
.updates-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
    vertical-align: top;
}

.updates-table th {
    width: 76px;
    font-weight: 700;
}

.link-list {
    margin-left: 18px;
    line-height: 1.6;
}

.pv-hub {
    max-width: 1180px;
    margin: 0 auto;
}

.hub-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.hub-heading h1 {
    font-size: 28px;
}

.hub-heading p {
    color: #333;
    font-weight: 700;
}

.hub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.hub-tabs a,
.hub-tabs summary,
.action-list a,
.map-links a {
    color: #12396f;
    text-decoration: none;
    font-weight: 700;
}

.hub-tabs a,
.hub-tabs summary {
    padding: 8px 12px;
    border: 1px solid #b7c5d8;
    border-radius: 4px;
    background: #f5f8fc;
    cursor: pointer;
}

.hub-tab-more {
    position: relative;
}

.hub-tab-more summary {
    list-style: none;
}

.hub-tab-more summary::-webkit-details-marker {
    display: none;
}

.hub-tab-more summary::after {
    content: " v";
}

.hub-tab-more div {
    position: absolute;
    z-index: 10;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid #b7c5d8;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.hub-tab-more:not([open]) div {
    display: none;
}

.hub-tab-more div a {
    display: block;
}

.hub-tabs a:hover,
.hub-tabs a.active,
.hub-tabs summary:hover,
.hub-tabs summary.active,
.action-list a:hover,
.map-links a:hover {
    text-decoration: underline;
}

.xp-notice {
    margin-bottom: 14px;
    padding: 10px 12px;
    color: #23410f;
    background: #f4ffe9;
    border: 1px solid #b8d99a;
    border-radius: 4px;
    font-weight: 700;
}

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

.hub-summary div,
.pokedex-search-tile,
.hub-section {
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
}

.hub-summary div,
.pokedex-search-tile {
    padding: 12px;
}

.hub-summary span {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.hub-summary strong {
    font-size: 18px;
}

.pokedex-search-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 8px;
}

.pokedex-search-tile label {
    display: block;
}

.pokedex-search-tile input {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid #9aa6b5;
    border-radius: 4px;
    font: inherit;
}

.pokedex-search-tile .button {
    min-height: 34px;
    padding: 6px 12px;
}

.pokedex-search-tile a {
    align-self: center;
    font-weight: 700;
}

.hub-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 16px;
}

.hub-section {
    padding: 16px;
}

.hub-section h2 {
    margin-bottom: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid #e0e4ea;
    font-size: 17px;
}

.featured-body {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.featured-body h3 {
    margin-bottom: 4px;
    font-size: 18px;
}

.featured-body p {
    margin-bottom: 8px;
    color: #333;
}

.sprite-placeholder {
    display: grid;
    place-items: center;
    color: #31517b;
    background: #eaf1ff;
    border: 1px solid #b8c6d9;
    font-weight: 900;
    width: 88px;
    height: 66px;
    font-size: 34px;
}

.task-list {
    margin-left: 18px;
    line-height: 1.7;
}

.daily-list {
    display: grid;
    gap: 8px;
    list-style: none;
}

.daily-list li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding-bottom: 7px;
    border-bottom: 1px solid #eee;
}

.daily-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.daily-list li.is-done {
    color: #666;
}

.daily-list li.is-done span:nth-child(2) {
    text-decoration: line-through;
}

.daily-check {
    color: #116329;
    font-weight: 900;
    text-align: center;
}

.daily-action {
    padding: 0;
    border: 0;
    background: transparent;
    color: #04e;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.daily-gift-card form {
    margin-top: 14px;
}

.daily-gift-card {
    margin-bottom: 24px;
}

.daily-gift-status {
    color: #116329;
    font-weight: 900;
}

.trainer-hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid #b9c7da;
    border-radius: 6px;
    background: #fff;
}

.trainer-hub-kicker,
.trainer-hub-level span,
.trainer-hub-stats span {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.trainer-hub-hero h2 {
    margin-bottom: 6px;
    font-size: 28px;
}

.trainer-hub-hero p {
    margin: 0;
    color: #333;
    line-height: 1.35;
}

.trainer-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.trainer-hub-level {
    display: grid;
    align-content: center;
    padding: 14px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #f7f9fc;
}

.trainer-hub-level strong {
    margin-bottom: 8px;
    font-size: 32px;
}

.trainer-hub-meter {
    height: 10px;
    overflow: hidden;
    border: 1px solid #9aa6b5;
    background: #fff;
}

.trainer-hub-meter i {
    display: block;
    height: 100%;
    background: #2f3f57;
}

.trainer-hub-level p {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
}

.trainer-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0;
    padding: 14px;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
}

.trainer-home h2 {
    margin-bottom: 4px;
    font-size: 22px;
}

.trainer-home h2 span {
    color: #555;
    font-size: 16px;
}

.trainer-home p {
    margin: 0 0 8px;
    color: #333;
}

.trainer-home small {
    display: block;
    margin-top: 5px;
    color: #555;
    font-weight: 700;
}

.trainer-home-meter {
    width: min(360px, 100%);
    height: 9px;
    overflow: hidden;
    border: 1px solid #9aa6b5;
    background: #eef2f7;
}

.trainer-home-meter span {
    display: block;
    height: 100%;
    background: #2f3f57;
}

.trainer-home-actions {
    display: flex;
    gap: 8px;
}

.world-status {
    max-width: 680px;
    margin-bottom: 16px;
}

.world-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.world-status-grid div {
    padding: 9px;
    border: 1px solid #edf0f4;
    border-radius: 5px;
    background: #fbfcfe;
}

.world-status-grid span {
    display: block;
    margin-bottom: 3px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.world-status p {
    margin: 8px 0 0;
}

.trainer-today {
    max-width: 680px;
}

.community-goal {
    max-width: 680px;
    margin-bottom: 16px;
}

.community-goal p {
    margin: 8px 0;
}

.community-goal-list {
    display: grid;
    gap: 10px;
}

.community-goal-card {
    padding: 10px 0 0;
    border-top: 1px solid #e3e8ef;
}

.community-goal-card:first-child {
    padding-top: 0;
    border-top: 0;
}

.community-goal-card h3 {
    margin: 0;
    font-size: 15px;
}

.community-goal-meter span {
    background: #16803a;
}

.community-goal-status {
    color: #555;
    font-weight: 700;
}

.professor-story-board {
    max-width: 860px;
}

.professor-story-list {
    display: grid;
    gap: 8px;
}

.professor-story-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #e3e8ef;
}

.professor-story-sprite {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.professor-story-card:first-child {
    border-top: 0;
}

.professor-story-card h3 {
    margin: 0 0 3px;
    font-size: 16px;
}

.professor-story-card p {
    margin: 0 0 4px;
    color: #333;
}

.professor-story-card b {
    display: block;
    margin-bottom: 3px;
    color: #2f3f57;
}

.professor-story-card small,
.professor-story-card span {
    color: #555;
    font-weight: 700;
}

.professor-story-card.is-done {
    opacity: .72;
}

.professor-story-card.is-done strong {
    color: #16803a;
}

.professor-story-current {
    padding: 14px 0 4px;
    border-top: 0;
}

.professor-story-current h3 {
    font-size: 18px;
}

.professor-story-current > div:last-child span {
    color: #555;
    font-weight: 900;
}

.trainer-today-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #edf0f4;
}

.trainer-today-row:first-of-type {
    border-top: 0;
}

.trainer-today-row span {
    font-weight: 700;
}

.trainer-today-row em {
    color: #16803a;
    font-style: normal;
    font-weight: 700;
}

.minigame-card {
    max-width: 820px;
}

.minigame-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 18px;
    align-items: center;
}

.minigame-meta {
    color: #555;
    font-weight: 700;
}

.minigame-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.toss-game {
    display: grid;
    gap: 10px;
}

.toss-lane {
    position: relative;
    height: 54px;
    border: 1px solid #9aa6b5;
    border-radius: 6px;
    background: #eef2f7;
}

.toss-center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 18px;
    transform: translateX(-50%);
    background: #c60000;
}

.toss-ball {
    position: absolute;
    top: 50%;
    left: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #111;
    border-radius: 50%;
    background: linear-gradient(#c60000 0 48%, #111 48% 54%, #fff 54% 100%);
    transform: translate(-50%, -50%);
}

.toss-game strong {
    font-size: 18px;
}

.slot-machine {
    display: grid;
    gap: 10px;
}

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

.slot-reel {
    display: grid;
    min-height: 112px;
    place-items: center;
    padding: 10px;
    border: 1px solid #9aa6b5;
    border-radius: 6px;
    background: #eef2f7;
}

.slot-reel img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    image-rendering: pixelated;
}

.slot-reel strong,
.slot-machine > strong {
    font-size: 14px;
}

.pokeslots-card form {
    margin-top: 12px;
}

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

.social-list {
    display: grid;
    gap: 10px;
}

.social-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #edf0f4;
}

.social-row:first-of-type {
    border-top: 0;
}

.social-row strong,
.social-row span {
    display: block;
}

.social-row span {
    color: #555;
    font-size: 13px;
}

.social-row.is-unread strong {
    color: #c60000;
}

.social-actions,
.profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.social-actions form,
.profile-actions form {
    display: inline;
}

.social-status {
    color: #555;
    font-weight: 700;
}

.message-view .message-body {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
    line-height: 1.45;
}

.cafe-forum-shell {
    margin-bottom: 16px;
    border: 1px solid #9fb9c7;
    background: #fff;
}

.cafe-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-bottom: 10px;
    padding: 7px 9px;
    border: 1px solid #c2cbd4;
    border-radius: 4px;
    background: #f7f7f7;
    font-size: 12px;
    font-weight: 700;
}

.cafe-action-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    margin-bottom: 8px;
}

.cafe-action-bar .button {
    min-height: 30px;
    padding: 6px 10px;
}

.cafe-forum-welcome {
    padding: 7px 9px;
    background: #20282d;
    color: #fff;
    font-weight: 700;
}

.cafe-whats-going-on {
    margin-top: 14px;
    border: 1px solid #b8ced8;
    background: #fff;
}

.cafe-stats-row {
    padding: 7px 9px;
    border-top: 1px solid #b8ced8;
    background: #f7fbfd;
    font-size: 12px;
    line-height: 1.35;
}

.cafe-stats-row:first-of-type {
    border-top: 0;
}

.cafe-stats-row p {
    margin: 3px 0 0;
}

.cafe-active-users {
    color: #34495e;
}

.cafe-role-4 {
    color: #c90000;
    font-weight: 700;
}

.cafe-role-3 {
    color: #f26b00;
    font-weight: 700;
}

.cafe-role-2 {
    color: #6b38d7;
    font-weight: 700;
}

.cafe-role-1 {
    color: #0065c8;
    font-weight: 700;
}

.cafe-role-0 {
    color: #2b8a3e;
}

.cafe-category-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 72px 220px;
    gap: 8px;
    align-items: center;
    padding: 4px 8px;
    border-top: 1px solid #b8ced8;
    border-bottom: 1px solid #b8ced8;
    background: #e8f1f4;
    color: #002f45;
    font-size: 12px;
}

.cafe-category-head strong {
    font-size: 13px;
}

.cafe-category-head span {
    text-align: center;
}

.cafe-category-head span:last-child {
    text-align: left;
}

.cafe-forum-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 72px 72px 220px;
    gap: 8px;
    align-items: center;
    min-height: 58px;
    padding: 8px;
    border-bottom: 1px solid #c9dce4;
    background: linear-gradient(180deg, #fbfeff, #eef8fb);
}

.cafe-forum-row:nth-child(odd) {
    background: #fff;
}

.cafe-forum-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #9d3f1e;
    border-radius: 4px;
    background: linear-gradient(180deg, #d95d28, #8f2d10);
    color: #fff;
    font-weight: 900;
}

.cafe-forum-main h2 {
    margin: 0 0 2px;
    padding: 0;
    border: 0;
    font-size: 14px;
}

.cafe-forum-main p {
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 1.25;
}

.cafe-forum-main small {
    display: block;
    color: #222;
    font-size: 12px;
}

.cafe-forum-count {
    text-align: center;
    font-size: 12px;
}

.cafe-forum-last {
    min-width: 0;
    font-size: 12px;
    line-height: 1.25;
}

.cafe-forum-last strong,
.cafe-forum-last span,
.cafe-forum-last time {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cafe-forum-last time {
    color: #31517b;
}

.cafe-thread-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 72px 72px;
    gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid #b8ced8;
    background: #e8f1f4;
    color: #002f45;
    font-size: 12px;
    font-weight: 700;
}

.cafe-thread-list-head span:not(:first-child) {
    text-align: center;
}

.cafe-thread-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 190px 72px 72px;
    gap: 8px;
    align-items: center;
    min-height: 46px;
    padding: 7px 8px;
    border-bottom: 1px solid #cbd5e1;
    background: #fff;
    font-size: 12px;
}

.cafe-thread-row:nth-child(even) {
    background: #f7fbfd;
}

.cafe-thread-status {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid #9fb9c7;
    border-radius: 3px;
    background: #e8f1f4;
    color: #002f45;
    font-size: 11px;
    font-weight: 900;
}

.cafe-thread-title strong,
.cafe-thread-title span,
.cafe-thread-last {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cafe-thread-title span {
    color: #333;
}

.cafe-thread-count {
    text-align: center;
}

.cafe-empty-row {
    padding: 12px;
    border-bottom: 1px solid #cbd5e1;
    font-weight: 700;
}

.cafe-thread-shell {
    margin-bottom: 16px;
    border: 1px solid #9fb9c7;
    background: #fff;
}

.cafe-thread-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    background: #20282d;
    color: #fff;
    font-weight: 700;
}

.cafe-reply {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    border-top: 1px solid #cbd5e1;
}

.cafe-reply:first-of-type {
    border-top: 0;
}

.cafe-reply aside {
    padding: 10px;
    border-right: 1px solid #cbd5e1;
    background: #eef6fa;
}

.cafe-reply aside strong,
.cafe-reply aside span {
    display: block;
}

.cafe-reply aside span {
    margin-top: 3px;
    color: #333;
    font-size: 12px;
}

.cafe-reply > div {
    min-width: 0;
    padding: 10px 12px;
}

.cafe-reply-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: -10px -12px 10px;
    padding: 5px 8px;
    border-bottom: 1px solid #d7e2e9;
    background: #f7fbfd;
    color: #333;
    font-size: 12px;
}

.cafe-reply p,
.cafe-post-body {
    margin: 0;
    line-height: 1.45;
}

.cafe-post-body blockquote,
.cafe-bbcode-quote {
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid #c6d6e0;
    border-left: 4px solid #7893a3;
    background: #f3f8fb;
}

.cafe-bbcode-code {
    margin: 8px 0;
    padding: 8px 10px;
    overflow-x: auto;
    border: 1px solid #c9d2dc;
    background: #f7f7f7;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

.cafe-bbcode-underline {
    text-decoration: underline;
}

.cafe-bbcode-strike {
    text-decoration: line-through;
}

.cafe-bbcode-size-1 {
    font-size: 11px;
}

.cafe-bbcode-size-2 {
    font-size: 12px;
}

.cafe-bbcode-size-3 {
    font-size: 14px;
}

.cafe-bbcode-size-4 {
    font-size: 17px;
}

.cafe-bbcode-size-5 {
    font-size: 20px;
}

.cafe-bbcode-image {
    display: block;
    max-width: min(100%, 520px);
    max-height: 360px;
    margin: 8px 0;
    border: 1px solid #cbd5e1;
    object-fit: contain;
}

.cafe-smilie {
    display: inline-flex;
    min-width: 24px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    padding: 1px 4px;
    border: 1px solid #d5e0ea;
    border-radius: 999px;
    background: #fff9d8;
    color: #5a3900;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.cafe-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 6px;
    padding: 6px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    background: #eef6fa;
}

.cafe-editor-toolbar button {
    min-height: 26px;
    padding: 4px 7px;
    border: 1px solid #9fb9c7;
    border-radius: 3px;
    background: #fff;
    color: #002f45;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.cafe-editor-toolbar button:hover {
    border-color: #5e7d8d;
    background: #f7fbfd;
}

.cafe-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 16px;
}

.cafe-post {
    display: grid;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid #edf0f4;
}

.cafe-post:first-of-type {
    border-top: 0;
}

.cafe-post strong,
.cafe-post span {
    display: block;
}

.cafe-post span {
    color: #555;
    font-size: 13px;
}

.cafe-post p {
    margin: 0;
    line-height: 1.45;
}

.form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #9aa6b5;
    border-radius: 3px;
    font: inherit;
}

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

.trainer-hub-stats div {
    padding: 12px;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
}

.trainer-hub-stats strong {
    font-size: 18px;
}

.trainer-hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.trainer-next-card strong {
    display: block;
    margin-bottom: 5px;
    font-size: 22px;
}

.trainer-next-card p {
    margin-bottom: 12px;
    color: #333;
}

.trainer-best-body {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.trainer-best-body img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    image-rendering: pixelated;
}

.trainer-best-body strong {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
}

.trainer-best-body p {
    margin-bottom: 8px;
    color: #333;
    font-weight: 700;
}

.trainer-daily-gift {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-weight: 700;
}

.action-list,
.map-links {
    display: grid;
    gap: 8px;
}

.item-category {
    margin-bottom: 18px;
}

.item-category:last-child {
    margin-bottom: 0;
}

.item-category h3 {
    margin-bottom: 6px;
    color: #333;
    font-size: 13px;
    text-transform: uppercase;
}

.item-table {
    width: 100%;
    border-collapse: collapse;
}

.item-table th,
.item-table td {
    padding: 8px 7px;
    border-bottom: 1px solid #ededed;
    text-align: left;
    vertical-align: top;
}

.item-table th {
    width: 160px;
    font-size: 15px;
}

.item-table .item-qty {
    width: 64px;
    color: #333;
    font-weight: 700;
    white-space: nowrap;
}

.item-table tr.is-empty {
    color: #777;
}

.market-table td:last-child {
    width: 170px;
}

.market-buy-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.market-buy-form input {
    width: 58px;
    min-height: 38px;
    padding: 6px;
    border: 1px solid #999;
    border-radius: 4px;
    font: inherit;
}

.market-grid {
    margin-bottom: 16px;
}

.market-list-section {
    margin-bottom: 16px;
}

.market-view-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.market-view-nav a {
    min-width: 92px;
    padding: 7px 12px;
    border: 1px solid #b7c5d8;
    border-radius: 4px;
    color: #00326e;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.market-view-nav a.active {
    background: #2f405b;
    border-color: #2f405b;
    color: #fff;
}

.market-mini-list {
    display: grid;
    gap: 8px;
}

.market-mini-list article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #e0e4ea;
    border-radius: 4px;
}

.market-mini-list img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
}

.market-mini-list strong,
.market-mini-list span {
    display: block;
}

.market-mini-list span {
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.market-pokemon-buy {
    display: grid;
    justify-items: end;
    gap: 7px;
    min-width: 140px;
}

.market-pokemon-buy strong {
    font-size: 18px;
}

.market-pokemon-buy span {
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.market-pokemon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.market-sale-card {
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.market-sale-body {
    min-height: 118px;
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr) auto 96px;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.market-sale-accent {
    width: 6px;
    align-self: end;
    border-radius: 999px;
    background: #2f405b;
}

.market-sale-info h3 {
    margin: 0 0 5px;
    font-size: 18px;
}

.market-sale-info p {
    margin: 0 0 3px;
    font-size: 12px;
    font-weight: 700;
}

.market-sale-action {
    min-width: 150px;
    display: grid;
    justify-items: center;
    gap: 6px;
}

.market-sale-action strong {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #f0c76c;
    border-radius: 5px;
    background: #fff7df;
    color: #111;
    font-size: 17px;
}

.market-sale-action span {
    color: #0037a8;
    font-size: 12px;
    font-weight: 700;
}

.market-sale-action .button {
    min-height: 32px;
    padding: 6px 12px;
}

.market-sale-body img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    justify-self: center;
}

.release-log-page .hub-heading p {
    margin: 5px 0 0;
    color: #333;
    font-weight: 700;
}

.release-log-list {
    display: grid;
    gap: 8px;
}

.release-log-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 170px;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid #ccd5df;
    border-left: 6px solid #2f405b;
    border-radius: 6px;
    background: #fff;
}

.release-log-card.is-shiny {
    border-left-color: #d69b00;
}

.release-log-card.is-market {
    border-left-color: #1f7a46;
}

.release-log-card.is-gym {
    border-left-color: #9b3d3d;
}

.release-log-type {
    color: #2f405b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.release-log-card h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.release-log-card p,
.release-log-meta {
    margin: 0;
    color: #333;
    font-size: 13px;
    font-weight: 700;
}

.release-log-meta {
    justify-self: end;
    text-align: right;
    color: #555;
}

.sell-pokemon-intro p {
    max-width: 980px;
    margin: 0 0 8px;
}

.sell-pokemon-table th,
.sell-pokemon-table td {
    width: auto;
}

.sell-pokemon-table th:first-child {
    width: 48%;
}

.sell-pokemon-table th:last-child,
.sell-pokemon-table td:last-child {
    width: 72px;
    text-align: center;
}

.sell-pokemon-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.sell-gender,
.sell-status {
    margin-left: 5px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.sell-status {
    color: #9b1c1c;
}

.sell-pokemon-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.log-table {
    font-size: 12px;
}

.log-table th,
.log-table td {
    width: auto;
    white-space: nowrap;
}

.log-table td:nth-child(4) {
    white-space: normal;
}

.staff-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.staff-search-form input {
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #9aa6b5;
    border-radius: 6px;
    font: inherit;
}

.staff-table th:last-child,
.staff-table td:last-child {
    width: 70px;
    text-align: right;
}

.staff-profile-grid {
    margin-top: 16px;
    margin-bottom: 16px;
}

.staff-action-form {
    margin-top: 14px;
}

.danger-button {
    color: #fff;
    background: #8f1f1f;
    border-color: #8f1f1f;
}

.staff-muted {
    margin-top: 14px;
    color: #666;
    font-weight: 700;
}

.staff-alerts {
    grid-column: 1 / -1;
}

.staff-alert-table th,
.staff-alert-table td {
    width: auto;
}

.staff-pokemon-list {
    display: grid;
    gap: 7px;
}

.staff-pokemon-list li,
.staff-pokemon-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.staff-pokemon-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    background: #f8fafc;
}

.staff-pokemon-icon img {
    width: auto;
    height: auto;
    max-width: 24px;
    max-height: 24px;
    image-rendering: pixelated;
}

.beta-dashboard-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.beta-dashboard-heading span {
    color: #555;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.beta-dashboard-summary {
    margin-bottom: 16px;
}

.beta-health-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.beta-health-overview span {
    display: block;
    color: #555;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.beta-health-overview strong {
    display: block;
    margin-top: 3px;
    font-size: 24px;
    line-height: 1;
}

.beta-health-overview p {
    margin: 6px 0 0;
    color: #34495e;
}

.beta-health-good {
    color: #137333;
}

.beta-health-watch {
    color: #996100;
}

.beta-health-needs-attention {
    color: #b3261e;
}

.beta-health-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.beta-health-signals {
    margin-bottom: 16px;
}

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

.beta-signal {
    min-height: 82px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 12px;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.beta-signal span {
    color: #555;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.beta-signal strong {
    font-size: 24px;
    line-height: 1;
}

.beta-signal small {
    color: #666;
    font-size: 12px;
    font-weight: 700;
}

.beta-signal-warning {
    border-color: #e3b04b;
    background: #fffaf0;
}

.beta-signal-danger {
    border-color: #dc6d68;
    background: #fff5f5;
}

.beta-stat-grid,
.beta-queue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.beta-stat-grid div,
.beta-queue-grid a {
    min-height: 76px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 12px;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
    text-decoration: none;
}

.beta-stat-grid div.is-warning,
.beta-queue-grid a.has-count {
    border-color: #e3b04b;
    background: #fffaf0;
}

.beta-stat-grid span,
.beta-queue-grid span {
    color: #555;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.beta-stat-grid strong,
.beta-queue-grid strong {
    color: #111;
    font-size: 22px;
    line-height: 1;
}

.beta-stat-grid small {
    color: #666;
    font-size: 12px;
    font-weight: 700;
}

.beta-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 16px;
    margin-bottom: 16px;
}

.beta-wide-panel {
    min-width: 0;
}

.beta-log-table td,
.beta-log-table th {
    white-space: normal;
}

.beta-log-table td:first-child,
.beta-log-table th:first-child {
    white-space: nowrap;
}

.beta-row-warning td {
    background: #fffaf0;
}

.achievement-list {
    display: grid;
    gap: 8px;
}

.achievement-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 10px;
    border: 1px solid #e0e4ea;
    border-radius: 4px;
}

.achievement-list article.is-done {
    background: #f4ffe9;
    border-color: #b8d99a;
}

.achievement-list span {
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.achievement-list article.is-done span {
    color: #116329;
}

.achievement-list p {
    grid-column: 1 / -1;
    margin: 0;
    color: #555;
}

.ranking-board .boxed-heading {
    margin-bottom: 4px;
}

.ranking-board .boxed-heading h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.ranking-filter-section {
    margin-bottom: 14px;
    padding: 10px 12px;
}

.ranking-filter-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ranking-filter-form label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ranking-filter-form span {
    color: #555;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.ranking-filter-form select {
    width: 220px;
    max-width: 100%;
    padding: 3px 6px;
}

.ranking-filter-form a {
    color: #04e;
    font-size: 13px;
    font-weight: 700;
}

.ranking-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
    font-size: 13px;
}

.ranking-page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ranking-page-links strong {
    color: #000;
    font-weight: 700;
    text-decoration: none;
}

.ranking-page-select {
    margin-left: auto;
}

.ranking-page-select select {
    min-width: 82px;
    padding: 1px 2px;
}

.ranking-roster-list {
    display: grid;
    gap: 0;
    border: 1px solid #d8e0ea;
    border-radius: 5px;
    overflow: hidden;
}

.ranking-roster-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1.3fr) minmax(120px, .8fr) auto;
    gap: 8px;
    padding: 7px 8px;
    color: #555;
    background: #f2f5f9;
    border-bottom: 1px solid #d8e0ea;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.ranking-roster-header span:last-child {
    text-align: right;
}

.ranking-roster-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1.3fr) minmax(120px, .8fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid #e4e9f0;
    border-radius: 0;
    background: #fff;
}

.ranking-roster-card:nth-of-type(odd) {
    background: #fff;
}

.ranking-roster-card:nth-of-type(even) {
    background: #f8fbff;
}

.ranking-roster-card:first-of-type {
    border-top: 0;
}

.ranking-roster-card.is-current-user {
    background: #f2f6ff;
}

.ranking-roster-card:last-child {
    border-bottom: 0;
}

.ranking-rank {
    color: #2f3f57;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.ranking-main,
.ranking-trainer-meta {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.ranking-main a,
.ranking-trainer-meta a {
    min-width: 0;
    overflow: hidden;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.ranking-main a:hover,
.ranking-trainer-meta a:hover {
    text-decoration: underline;
}

.ranking-main span,
.ranking-trainer-meta span {
    min-width: 0;
    overflow: hidden;
    color: #666;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-stat {
    justify-self: end;
    min-width: 62px;
    color: #111;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}

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

.battle-result-card {
    margin-bottom: 16px;
}

.battle-result-card h2 {
    text-align: center;
}

.battle-arena {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.battle-combatant {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid #ccd5df;
    border-radius: 6px;
}

.battle-namebar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    color: #fff;
    background: #2f3f57;
    border-radius: 4px;
}

.battle-hp,
.battle-exp {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr);
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
}

.battle-hp div,
.battle-exp div {
    height: 14px;
    padding: 2px;
    border: 1px solid #7c8798;
    background: #fff;
}

.battle-hp i,
.battle-exp i {
    display: block;
    height: 100%;
    background: #2091c7;
}

.battle-hp.hp-healthy i {
    background: #35a852;
}

.battle-hp.hp-warning i {
    background: #f7d02c;
}

.battle-hp.hp-danger i {
    background: #d64545;
}

.battle-exp i {
    background: #7897d8;
}

.battle-combatant img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.battle-combatant.is-fainted img {
    opacity: .45;
    filter: grayscale(1);
}

.battle-combatant p {
    margin: 0;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.battle-held-item {
    display: block;
    color: #666;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.battle-vs {
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

.battle-team-preview-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: -4px 0 14px;
    padding-top: 10px;
    border-top: 1px solid #e0e4ea;
}

.battle-team-preview {
    min-width: 0;
}

.battle-team-preview h3 {
    margin-bottom: 8px;
    color: #555;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
}

.battle-team-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 7px;
}

.battle-team-preview form {
    min-width: 0;
}

.battle-team-preview button,
.battle-team-preview article {
    position: relative;
    width: 100%;
    min-height: 92px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    padding: 8px 6px 7px;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: center;
}

.battle-team-preview button {
    cursor: pointer;
}

.battle-team-preview button:hover {
    border-color: #2f3f57;
    background: #f5f8fc;
}

.battle-team-preview article.active {
    border-color: #2f3f57;
    background: #f5f8fc;
}

.battle-team-preview article.fainted {
    color: #777;
    background: #f4f4f4;
}

.battle-team-preview span {
    position: absolute;
    top: 5px;
    left: 7px;
    color: #555;
    font-size: 11px;
    font-weight: 900;
}

.battle-team-preview img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
}

.battle-team-preview article.fainted img {
    opacity: .4;
    filter: grayscale(1);
}

.battle-team-preview strong,
.battle-team-preview em {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.battle-team-preview strong {
    font-size: 12px;
}

.battle-team-preview em {
    color: #555;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.battle-result-grid {
    display: grid;
    grid-template-columns: minmax(240px, .7fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: start;
}

.battle-result-grid h3 {
    margin-bottom: 8px;
    font-size: 15px;
}

.battle-summary {
    margin: 10px auto 0;
    max-width: 480px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
}

.battle-summary.is-win {
    background: transparent;
}

.battle-summary.is-loss {
    background: transparent;
}

.battle-summary-heading {
    margin-bottom: 8px;
}

.battle-summary-heading span {
    display: none;
}

.battle-summary.is-win .battle-summary-heading span {
    background: transparent;
}

.battle-summary.is-loss .battle-summary-heading span {
    background: transparent;
}

.battle-summary h3 {
    margin: 0;
    color: #222;
    font-size: 18px;
    font-weight: 900;
}

.battle-summary-heading p {
    margin: 3px auto 0;
    max-width: 360px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.battle-summary-rewards {
    display: block;
}

.battle-summary-rewards p {
    margin: 2px 0;
    color: #333;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    text-transform: none;
}

.battle-summary-rewards strong {
    color: #111;
    font-weight: 700;
}
.battle-log {
    margin: 14px auto 0;
    padding: 0;
    border: 0;
    text-align: center;
}

.battle-log p {
    margin: 0 0 3px;
    color: #6a6a6a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}

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

.battle-log-attack,
.battle-log-faint,
.battle-log-win {
    color: #444;
    font-weight: 900;
}

.battle-log-reward {
    color: #666;
}

.battle-log-effect {
    color: #555;
    font-style: italic;
}

.battle-actions {
    justify-content: center;
}

.battle-mode-actions {
    justify-content: center;
    margin-top: 12px;
}

.battle-mode-section {
    margin-top: 16px;
}

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

.battle-mode-card {
    min-height: 86px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #fff;
}

.battle-mode-card h3 {
    margin-bottom: 4px;
    font-size: 16px;
}

.battle-mode-card p {
    margin: 0;
    color: #555;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.battle-mode-card.is-cleared {
    border-color: #9cc58a;
    background: #f5fff1;
}

.battle-mode-card.is-locked {
    opacity: 0.7;
    background: #f7f7f7;
}

.battle-mode-card .npc-ladder-status {
    margin-top: 4px;
    color: #333;
    font-size: 11px;
    text-transform: uppercase;
}

.battle-subsection {
    margin-top: 14px;
}

.battle-subsection > h3 {
    margin-bottom: 8px;
    font-size: 16px;
}

.npc-battle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.trainer-battle-search-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.trainer-battle-search-form input {
    min-height: 30px;
    width: 260px;
    max-width: 100%;
    padding: 4px 7px;
    border: 1px solid #9aa6b5;
    border-radius: 4px;
    font: inherit;
    font-size: 13px;
}

.trainer-battle-results {
    display: grid;
    gap: 4px;
    max-width: 560px;
    margin-top: 8px;
}

.trainer-battle-results article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 7px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #fff;
}

.trainer-battle-results span {
    display: block;
    color: #555;
    font-size: 11px;
    font-weight: 700;
}

.battle-roster-list {
    display: grid;
    gap: 8px;
}

.battle-roster-row {
    display: grid;
    grid-template-columns: 26px 64px minmax(0, 1fr) minmax(220px, auto);
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
}

.battle-roster-slot {
    color: #555;
    font-weight: 900;
    text-align: center;
}

.battle-roster-row img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    image-rendering: pixelated;
}

.battle-roster-main h3 {
    margin-bottom: 2px;
    font-size: 16px;
}

.battle-roster-main p {
    margin: 0 0 5px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.battle-roster-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.battle-ready-panel {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(220px, auto);
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
}

.battle-ready-panel img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.battle-ready-main h3 {
    margin-bottom: 4px;
    font-size: 20px;
}

.battle-ready-main p {
    margin: 0 0 8px;
    color: #555;
    font-weight: 700;
}


.battle-ready-main .battle-exp {
    width: min(62%, 620px);
    min-width: 280px;
    margin-top: 6px;
}

.battle-ready-main .battle-exp div {
    height: 18px;
}
.battle-ready-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.battle-turn-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}

.battle-turn-form .button {
    min-height: 54px;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    line-height: 1.2;
}

.battle-turn-form .move-type {
    color: #fff;
    border-color: rgba(0, 0, 0, .25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}

.move-type-normal { color: #fff !important; background: #A8A77A; }
.move-type-fire { color: #fff !important; background: #EE8130; }
.move-type-water { color: #fff !important; background: #6390F0; }
.move-type-electric { color: #111 !important; background: #F7D02C; text-shadow: none !important; }
.move-type-grass { color: #fff !important; background: #7AC74C; }
.move-type-ice { color: #111 !important; background: #96D9D6; text-shadow: none !important; }
.move-type-fighting { color: #fff !important; background: #C22E28; }
.move-type-poison { color: #fff !important; background: #A33EA1; }
.move-type-ground { color: #111 !important; background: #E2BF65; text-shadow: none !important; }
.move-type-flying { color: #fff !important; background: #A98FF3; }
.move-type-psychic { color: #fff !important; background: #F95587; }
.move-type-bug { color: #111 !important; background: #A6B91A; text-shadow: none !important; }
.move-type-rock { color: #fff !important; background: #B6A136; }
.move-type-ghost { color: #fff !important; background: #735797; }
.move-type-dragon { color: #fff !important; background: #6F35FC; }
.move-type-dark { color: #fff !important; background: #705746; }
.move-type-steel { color: #111 !important; background: #B7B7CE; text-shadow: none !important; }
.move-type-fairy { color: #fff !important; background: #D685AD; }

.battle-turn-form span {
    color: inherit;
    font-size: 12px;
    font-weight: 400;
}

.battle-team-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.battle-team-strip span {
    padding: 5px 8px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.battle-team-strip span.active {
    color: #fff;
    background: #2f3f57;
    border-color: #2f3f57;
}

.battle-move-select {
    display: block;
    margin: 0;
}

.battle-move-select select {
    width: 100%;
    min-height: 34px;
    padding: 5px 7px;
    border: 1px solid #9aa6b5;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

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

.gym-card {
    min-height: 166px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.gym-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    color: #fff;
    background: #2f3f57;
}

.gym-card-header h2 {
    margin: 0;
    font-size: 15px;
}

.gym-card-header .type-pill {
    min-height: 22px;
    padding: 4px 8px;
}

.gym-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 12px;
    padding: 11px 12px 8px;
}

.gym-info {
    display: grid;
    gap: 5px;
    align-content: start;
}

.gym-info p {
    margin: 0;
}

.badge-earned {
    color: #116329;
    font-weight: 900;
}

.badge-missing {
    color: #b00000;
    font-weight: 700;
}
.badge-unlocked {
    color: #174f86;
    font-weight: 800;
}

.badge-locked {
    color: #777;
    font-weight: 700;
}

.gym-card-highlight {
    border-color: #6f94c6;
    box-shadow: 0 0 0 2px rgba(111, 148, 198, .16);
}
.gym-card-locked {
    background: #f7f7f7;
}

.gym-card-locked .gym-card-body,
.gym-card-locked .gym-card-actions {
    opacity: .72;
}

.gym-lock-note {
    color: #666;
    font-size: 13px;
}

.gym-card-actions span {
    color: #777;
    font-weight: 700;
}

.gym-leader-card {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    text-align: center;
    font-size: 12px;
}

.gym-leader-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #2f3f57;
    border-radius: 6px;
    font-size: 28px;
    font-weight: 900;
}

.gym-card-actions {
    padding: 8px 12px 12px;
    text-align: center;
}

.gym-card-actions a {
    font-weight: 700;
}

.gym-challenge-line {
    margin-bottom: 12px;
    color: #333;
    font-weight: 700;
}

.trade-list-section {
    margin-top: 16px;
}

.trainer-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-bottom: 14px;
}

.trainer-search-form input {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #9aa6b5;
    border-radius: 6px;
    font: inherit;
}

.trainer-result-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.trade-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.trade-picker-panel {
    display: grid;
    gap: 8px;
    text-align: center;
}

.trade-picker-panel h3 {
    font-size: 16px;
}

.trade-picker-panel select {
    width: 100%;
    min-height: 300px;
    padding: 6px;
    border: 1px solid #7c8798;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}

.trade-picker-panel option {
    padding: 2px 4px;
}

.trade-picker-panel p,
.trade-picker-note {
    margin: 0;
    color: #333;
    font-size: 13px;
}

.trade-picker-note {
    margin-top: 12px;
    text-align: center;
}

.trade-picker-actions {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.trade-accept-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.trade-accept-form select {
    min-height: 38px;
    max-width: 180px;
    padding: 6px 8px;
    border: 1px solid #9aa6b5;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}

.profile-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.profile-subtabs {
    margin-top: -6px;
    margin-bottom: 14px;
}

.profile-subtabs a {
    min-height: 34px;
    padding: 7px 11px;
    background: #fff;
}

.profile-layout .hub-section,
.profile-collapsible-box {
    border-color: #d7e0eb;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(38, 56, 79, .05);
}

.profile-card-body {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #2f3f57;
    border-radius: 8px;
    box-shadow: inset 0 -12px 20px rgba(0, 0, 0, .12);
    font-size: 34px;
    font-weight: 900;
}

.profile-card-body h3 {
    margin-bottom: 4px;
    font-size: 20px;
}

.profile-card-body p {
    margin: 0 0 4px;
    color: #536274;
    font-weight: 700;
}

.profile-banned-label {
    color: #a31212 !important;
    font-weight: 900 !important;
}

.profile-card .profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.profile-card .profile-actions .button {
    min-height: 34px;
    padding: 7px 11px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.profile-quick-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
}

.profile-quick-stats div {
    min-height: 50px;
    display: grid;
    align-content: center;
    padding: 9px 10px;
    border: 1px solid #e3e9f1;
    border-radius: 7px;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.profile-quick-stats span {
    display: block;
    margin-bottom: 3px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.profile-quick-stats strong {
    font-size: 15px;
    letter-spacing: 0;
}

.profile-muted-line {
    margin-top: 10px;
    color: #4f5f72;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.profile-showcase {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e4eaf2;
}

.profile-showcase-label {
    display: block;
    margin-bottom: 5px;
    color: #596879;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-partner {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
}

.profile-partner .profile-showcase-label {
    grid-column: 1 / -1;
    margin-bottom: -2px;
}

.profile-partner img {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
    image-rendering: pixelated;
}

.profile-partner strong {
    display: block;
    line-height: 1.15;
}

.profile-partner p,
.profile-milestones p {
    margin: 2px 0 0;
    color: #596879;
    font-size: 12px;
    font-weight: 700;
}

.profile-milestones div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.profile-milestones b {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 4px 7px;
    border: 1px solid #d5e4c7;
    border-radius: 999px;
    background: #f4ffe9;
    color: #23410f;
    font-size: 12px;
}

.profile-milestones a {
    display: inline-block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
}

.profile-staff-tools {
    margin-bottom: 14px;
    padding: 0;
    background: #fbfcfe;
    border-color: #d8e1ec;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(38, 56, 79, .04);
}

.profile-staff-drawer summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}

.profile-staff-drawer summary::-webkit-details-marker {
    display: none;
}

.profile-staff-drawer summary strong,
.profile-staff-drawer summary small,
.profile-staff-drawer summary b {
    display: block;
}

.profile-staff-drawer summary strong {
    font-size: 15px;
}

.profile-staff-drawer summary small {
    color: #596879;
    font-size: 13px;
    font-weight: 700;
}

.profile-staff-drawer summary b {
    min-width: 54px;
    color: #12396f;
    font-size: 12px;
    text-align: right;
}

.profile-staff-drawer[open] summary b {
    color: #596879;
}

.profile-staff-drawer[open] summary b::before {
    content: "Close";
}

.profile-staff-drawer[open] summary b {
    font-size: 0;
}

.profile-staff-drawer[open] summary b::before {
    font-size: 12px;
}

.profile-staff-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 12px 12px;
    border-top: 1px solid #e5ebf3;
}

.profile-staff-actions form {
    display: inline;
}

.profile-staff-actions .button {
    min-height: 32px;
    padding: 6px 10px;
    border-color: #b8c6d8;
    border-radius: 6px;
    background: #fff;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.profile-staff-actions .button-primary {
    color: #fff;
    background: var(--button);
    border-color: var(--button);
}

.profile-staff-actions .danger-button {
    color: #fff;
    background: #8f1f1f;
    border-color: #8f1f1f;
}

.profile-staff-actions .button:hover,
.profile-card .profile-actions .button:hover {
    border-color: #7387a4;
    box-shadow: 0 5px 12px rgba(38, 56, 79, .1);
    transform: translateY(-1px);
}

.profile-staff-actions .button-primary:hover,
.profile-card .profile-actions .button-primary:hover {
    border-color: var(--button);
}

.profile-staff-actions .danger-button:hover {
    border-color: #8f1f1f;
}

.profile-collapsible-box {
    margin-bottom: 14px;
    padding: 0;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.profile-collapsible-box summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    transition: background-color .16s ease;
}

.profile-collapsible-box summary::-webkit-details-marker {
    display: none;
}

.profile-collapsible-box summary:hover {
    background: #f7f9fc;
}

.profile-collapsible-box summary strong {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.profile-summary-icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #cbd6e4;
    border-radius: 999px;
    background: #fff;
}

.profile-summary-icon::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid #2f3f57;
    border-bottom: 2px solid #2f3f57;
    transform: rotate(-45deg);
    transition: transform .16s ease;
}

.profile-collapsible-box[open] .profile-summary-icon::before {
    transform: rotate(45deg) translate(-1px, -1px);
}

.profile-collapsible-box summary span {
    color: #4f5f72;
    font-size: 12px;
    font-weight: 700;
}

.profile-collapsible-box[open] {
    padding-bottom: 14px;
    box-shadow: 0 12px 26px rgba(38, 56, 79, .07);
}

.profile-collapsible-box[open] .profile-box-heading,
.profile-collapsible-box[open] > p,
.profile-collapsible-box[open] .profile-box-list {
    margin-left: 14px;
    margin-right: 14px;
}

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

.profile-team-slot {
    position: relative;
    min-height: 164px;
    display: grid;
    justify-items: center;
    grid-template-rows: 18px 96px auto auto;
    align-content: start;
    gap: 3px;
    padding: 8px 10px 11px;
    border: 1px solid #cfdae7;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fafcff);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.profile-team-slot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(91, 119, 158, .1));
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.profile-team-slot:hover {
    border-color: #8da0b9;
    box-shadow: 0 9px 20px rgba(38, 56, 79, .1);
    transform: translateY(-2px);
}

.profile-team-slot:hover::after {
    opacity: 1;
}

.profile-team-slot .team-slot-number {
    position: relative;
    z-index: 1;
    justify-self: start;
}

.profile-team-slot img {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
    transition: filter .16s ease, transform .16s ease;
}

.profile-team-slot:hover img {
    filter: drop-shadow(0 8px 8px rgba(38, 56, 79, .18));
    transform: translateY(-2px) scale(1.05);
}

.profile-team-slot h3 {
    position: relative;
    z-index: 1;
    align-self: end;
    margin-top: 2px;
    margin-bottom: 0;
    font-size: 14px;
    text-align: center;
}

.profile-team-slot p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.profile-team-hover {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid rgba(142, 158, 181, .65);
    border-radius: 7px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 18px rgba(38, 56, 79, .12);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease;
}

.profile-team-slot:hover .profile-team-hover {
    opacity: 1;
    transform: translateY(0);
}

.profile-team-hover div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.profile-team-hover b {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    padding: 3px 6px;
    border: 1px solid #d4dce7;
    border-radius: 999px;
    background: #f7f9fc;
    color: #26384f;
    font-size: 11px;
    line-height: 1;
}

.profile-badges-section {
    margin-bottom: 14px;
    padding: 0;
}

.profile-badges-section .boxed-heading {
    margin-bottom: 8px;
}

.profile-badges-section .boxed-heading h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}


.profile-badge-region {
    margin: 10px 14px 0;
    padding-top: 10px;
    border-top: 1px solid #edf1f6;
}

.profile-badge-region:first-of-type {
    border-top: 0;
}

.profile-badge-region-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}

.profile-badge-region-title span {
    color: #555;
    font-weight: 700;
}
.profile-badge-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
}

.profile-badge {
    min-height: 42px;
    display: grid;
    justify-items: center;
    align-content: center;
    padding: 5px;
    border: 1px solid #e0e4ea;
    border-radius: 7px;
    background: #fbfcfe;
    text-align: center;
    transition: border-color .16s ease, transform .16s ease;
}

.profile-badge.earned:hover {
    border-color: #8da0b9;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .profile-staff-actions .button,
    .profile-card .profile-actions .button,
    .profile-collapsible-box,
    .profile-collapsible-box summary,
    .profile-summary-icon::before,
    .profile-team-slot,
    .profile-badge {
        transition: none;
    }

    .profile-staff-actions .button:hover,
    .profile-card .profile-actions .button:hover,
    .profile-team-slot:hover,
    .profile-badge.earned:hover {
        transform: none;
    }
}

.profile-badge img,
.badge-empty {
    width: 28px;
    height: 28px;
}

.profile-badge img {
    object-fit: contain;
    image-rendering: pixelated;
}

.profile-badge.missing {
    color: #777;
    background: #fafafa;
}

.badge-empty {
    display: grid;
    place-items: center;
    color: #999;
    border: 1px dashed #bbb;
    border-radius: 4px;
    font-weight: 900;
}

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

.recent-catch-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #e0e4ea;
    border-radius: 6px;
}

.recent-catch-card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    image-rendering: pixelated;
}

.recent-catch-card h3 {
    margin-bottom: 3px;
    font-size: 16px;
}

.recent-catch-card p {
    margin: 0 0 2px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.profile-full-box {
    padding-top: 14px;
}

.profile-box-heading {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e4ea;
    text-align: center;
}

.profile-box-heading h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-box-heading select {
    min-width: 220px;
    min-height: 28px;
    padding: 3px 6px;
    border: 1px solid #999;
    background: #fff;
    font: inherit;
}

.profile-box-heading span:last-child {
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.profile-box-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.profile-box-card {
    min-height: 78px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #d8e1ec;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fbfcff);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.profile-box-card:hover {
    border-color: #91a4bd;
    box-shadow: 0 8px 18px rgba(38, 56, 79, .09);
    transform: translateY(-1px);
}

.profile-box-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
}

.profile-box-icon img {
    width: auto;
    height: auto;
    max-width: 40px;
    max-height: 40px;
    image-rendering: pixelated;
}

.profile-box-card h3 {
    margin: 0 0 3px;
    font-size: 14px;
    line-height: 1.15;
}

.profile-box-card p {
    margin: 0 0 5px;
    color: #555;
    font-size: 13px;
    font-weight: 700;
}

.profile-box-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.profile-box-types span {
    display: inline-flex;
    min-height: 19px;
    align-items: center;
    padding: 3px 6px;
    border: 1px solid #d4dce7;
    border-radius: 999px;
    background: #f7f9fc;
    color: #26384f;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.profile-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-result-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid #e0e4ea;
    border-radius: 6px;
}

.profile-result-avatar {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #2f3f57;
    border-radius: 6px;
    font-size: 28px;
    font-weight: 900;
}

.profile-result-card h3 {
    margin-bottom: 3px;
    font-size: 18px;
}

.profile-result-card p {
    margin: 0 0 3px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.dex-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid #e0e4ea;
}

.dex-section-heading h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.dex-section-heading select {
    min-height: 26px;
    padding: 2px 6px;
    border: 1px solid #999;
    background: #fff;
    font: inherit;
}

.dex-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-bottom: 12px;
    font-size: 13px;
}

.dex-pagination a,
.dex-pagination strong {
    color: #111;
}

.dex-pagination strong {
    text-decoration: underline;
}

.dex-pagination-bottom {
    margin-top: 12px;
    margin-bottom: 0;
}

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

.dex-row {
    min-height: 190px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 5px;
    padding: 9px 8px;
    border: 1px solid #e1e5ea;
    border-radius: 4px;
    background: #fff;
    color: #000;
    text-align: center;
    text-decoration: none;
}

.dex-row.is-missing {
    color: #777;
    background: #fbfbfb;
}

.dex-row:hover {
    border-color: #7c8798;
}

.dex-number {
    justify-self: start;
    color: #333;
    font-weight: 900;
}

.dex-row img {
    width: 104px;
    height: 104px;
    object-fit: contain;
    image-rendering: pixelated;
}

.dex-main h3 {
    margin-bottom: 2px;
    font-size: 15px;
}

.dex-main p {
    margin: 0;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.dex-status {
    display: flex;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
}

.dex-status strong {
    color: #111;
}

.dex-status .dex-caught {
    color: #116329;
    font-weight: 900;
}

.dex-status .dex-not-caught {
    color: #b00000;
    font-weight: 400;
}

.dex-detail {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) minmax(300px, 420px) 190px;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}

.dex-detail-art img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.dex-detail-main h2 {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 26px;
}

.dex-detail-main .dex-caught {
    color: #116329;
    font-weight: 900;
}

.dex-detail-main .dex-not-caught {
    color: #b00000;
    font-weight: 400;
}

.dex-detail-data {
    align-self: stretch;
}

.dex-detail-data h3 {
    margin-bottom: 8px;
    font-size: 15px;
}

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

.dex-stat-grid div {
    min-height: 48px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 7px 8px;
    border: 1px solid #e0e4ea;
    border-radius: 4px;
}

.dex-stat-grid span {
    color: #555;
    font-size: 11px;
    font-weight: 700;
}

.dex-stat-grid strong {
    font-size: 17px;
}

.mini-stat-table {
    width: 100%;
    border-collapse: collapse;
}

.mini-stat-table th,
.mini-stat-table td {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.mini-stat-table td {
    text-align: right;
    font-weight: 700;
}

.plain-link-list {
    display: grid;
    gap: 6px;
    list-style: none;
}

.plain-link-list span {
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.register-page {
    max-width: 460px;
    margin: 0 auto;
}

.register-form-area {
    width: 100%;
}

.register-form-area h1 {
    margin-bottom: 10px;
    font-size: 26px;
}

.form-note {
    margin-top: 14px;
}

.panel,
.explore-page {
    max-width: 1180px;
    margin: 0 auto;
}

.auth-panel {
    width: min(100%, 460px);
    margin: 18px auto 0;
    padding: 18px;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
}

.auth-panel .form {
    margin-top: 14px;
}

.auth-panel .button-primary {
    width: 100%;
}

.error-page {
    max-width: 760px;
}

.error-panel {
    text-align: center;
}

.error-panel p {
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
}

.error-panel .actions {
    justify-content: center;
}

.explore-heading {
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.explore-heading h1 {
    margin-bottom: 4px;
    font-size: 28px;
}

.explore-heading p {
    color: #333;
}

.map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 0;
}

.map-card {
    display: block;
    min-height: 42px;
    padding: 9px 10px;
    color: #12396f;
    text-decoration: none;
    border: 1px solid #b7c5d8;
    border-radius: 5px;
    background: #f8fafc;
}

.map-card strong,
.map-card span {
    display: block;
}

.map-card strong {
    font-size: 13px;
}

.map-card span {
    color: #333;
    font-size: 12px;
    line-height: 1.25;
}

.map-card:hover,
.map-card.active {
    background: #eaf1ff;
    border-color: #31517b;
}

.panel h1,
.encounter-panel h1 {
    margin-bottom: 14px;
    font-size: 24px;
}

.panel p,
.encounter-panel p {
    margin-bottom: 14px;
    color: var(--muted);
    line-height: 1.4;
}

.encounter-panel {
    margin-top: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    display: grid;
    justify-items: center;
    text-align: center;
}

.encounter-art {
    display: grid;
    justify-items: center;
    margin: 4px 0 8px;
}

.encounter-art img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.encounter-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 6px;
}

.encounter-meta span {
    padding: 4px 7px;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.encounter-panel .actions {
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

.catch-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.catch-form label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.catch-form select {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #7c8798;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 700;
}

.search-again {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.catch-summary {
    display: inline-grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
    text-align: left;
}

.catch-summary img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.catch-summary p {
    margin-bottom: 5px;
}

.eyebrow {
    margin-bottom: 8px;
    color: #333;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.form {
    max-width: 100%;
    display: grid;
    gap: 14px;
}

.form label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.form .check-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.form .check-row input {
    min-height: 0;
    width: auto;
}

.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;
}

.form input,
.form select {
    min-height: 40px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #999;
    border-radius: 2px;
    font: inherit;
    background: #fff;
}

.form input::placeholder {
    color: #555;
    opacity: 1;
}

.field-status {
    min-height: 16px;
    margin-top: -3px;
    font-size: 12px;
    font-weight: 700;
}

.field-status.is-ok {
    color: #116329;
}

.field-status.is-error {
    color: #900;
}

.starter-picker {
    border: 0;
}

.starter-picker legend {
    margin-bottom: 8px;
    color: #a00000;
    font-weight: 700;
    text-align: center;
}

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

.starter-option {
    display: block;
    cursor: pointer;
}

.starter-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.starter-option span {
    min-height: 82px;
    display: grid;
    grid-template-rows: 46px auto;
    place-items: center;
    gap: 4px;
    padding: 8px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #fff;
    text-align: center;
}

.starter-option img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
}

.starter-option input:checked + span {
    color: #fff;
    background: #b30000;
    border-color: #780000;
}

.starter-option input:focus + span {
    outline: 2px solid #2f3f57;
    outline-offset: 2px;
}

.message {
    margin-bottom: 14px;
    color: #900;
    font-weight: 700;
}

.type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

.type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid #999;
    border-radius: 4px;
    font-weight: 700;
}

.type-pill.move-type {
    color: #fff;
    border-color: rgba(0, 0, 0, .2);
    font-size: 12px;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}

.dex-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.dex-type-list .type-pill {
    min-height: 22px;
    padding: 4px 7px;
}

.boxed-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.team-builder {
    margin-bottom: 16px;
}

.team-builder h2,
.reserve-box h2 {
    margin-bottom: 10px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 10px;
}

.team-slot {
    position: relative;
    min-height: 204px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 5px;
    padding: 18px 10px 12px;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    background: #fff;
    text-align: center;
}

.team-slot-number {
    position: absolute;
    top: 6px;
    left: 8px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.team-slot img,
.team-slot .empty-sprite {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.team-slot h3 {
    margin-top: 4px;
    font-size: 15px;
}

.team-slot p {
    margin: 0;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.pokemon-card-link,
.pokemon-row-link {
    display: grid;
    justify-items: center;
    color: inherit;
    text-decoration: none;
}

.pokemon-card-link:hover h3,
.pokemon-row-main a:hover {
    text-decoration: underline;
}

.pokemon-row-link {
    justify-items: start;
}

.boxed-list {
    display: grid;
    gap: 8px;
}

.boxed-heading span {
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.box-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

.box-filter-form select {
    min-height: 34px;
    min-width: 210px;
    padding: 6px 8px;
    border: 1px solid #9aa6b5;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-weight: 700;
}

.pokemon-row {
    min-height: 112px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--soft-line);
    border-radius: 4px;
    background: #fff;
}

.pokemon-row img,
.empty-sprite {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
    background: transparent;
    border: 0;
}

.empty-sprite {
    display: grid;
    place-items: center;
    color: #777;
    font-size: 24px;
    font-weight: 700;
}

.pokemon-row-main h3 {
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.2;
}

.pokemon-row-main p {
    margin: 0;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.pokemon-row-main a {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
}

.pokemon-detail-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) minmax(320px, 460px);
    align-items: center;
    gap: 18px;
}

.pokemon-detail-art img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.pokemon-detail-main h2 {
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 28px;
}

.pokemon-species-name,
.pokemon-location {
    margin: 0 0 8px;
    color: #555;
    font-weight: 700;
}

.pokemon-detail-data {
    align-self: stretch;
}

.pokemon-detail-data h3 {
    margin-bottom: 8px;
    font-size: 15px;
}

.pokemon-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
}

.pokemon-info-grid div {
    min-width: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.pokemon-info-grid span {
    display: block;
    margin-bottom: 2px;
    color: #555;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.pokemon-info-grid strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.moves-section {
    margin-top: 16px;
}

.pending-move-section {
    margin-top: 16px;
}

.pending-move-list {
    display: grid;
    gap: 8px;
}

.pending-move-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid #e0e4ea;
    border-radius: 4px;
}

.pending-move-card.move-type {
    color: #fff;
    border-color: rgba(0, 0, 0, .18);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}

.pending-move-main strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.pending-move-main p {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
}

.pending-move-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 460px;
    font-size: 12px;
    font-weight: 700;
}

.pending-move-actions form {
    display: inline;
}

.pending-move-actions .slot-link {
    color: inherit;
}

.pending-skip-button {
    min-height: 30px;
    padding: 6px 9px;
}

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

.move-card {
    position: relative;
    min-height: 116px;
    padding: 10px 10px 10px 30px;
    border: 1px solid #e0e4ea;
    border-radius: 4px;
}

.move-card.move-type {
    color: #fff;
    border-color: rgba(0, 0, 0, .18);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}

.move-card.move-type .move-number,
.move-card.move-type p {
    color: inherit;
}

.move-number {
    position: absolute;
    top: 9px;
    left: 10px;
    color: #555;
    font-size: 12px;
    font-weight: 900;
}

.move-card strong {
    display: block;
    margin-bottom: 5px;
}

.move-card p {
    margin: 0 0 3px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.move-slot-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
}

.move-slot-form form {
    display: inline;
}

.move-card.move-type .move-slot-form span,
.move-card.move-type .move-slot-form strong,
.move-card.move-type .move-slot-form button {
    color: inherit;
}

.nickname-section {
    margin-top: 16px;
}

.release-section {
    margin-top: 16px;
}

.evolution-section {
    margin-top: 28px;
}

.evolution-ready,
.evolution-option {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.evolution-ready {
    max-width: 520px;
    margin: 10px auto 0;
    grid-template-columns: 96px minmax(0, 1fr);
    justify-content: center;
    text-align: left;
}

.evolution-ready img,
.evolution-option img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.evolution-ready p,
.evolution-option p {
    margin: 4px 0 10px;
    color: #444;
}

.evolution-list {
    display: grid;
    gap: 10px;
}

.evolution-option {
    min-height: 96px;
    padding: 8px;
    border: 1px solid #e0e4ea;
    border-radius: 6px;
}

.nickname-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.release-form {
    display: grid;
    grid-template-columns: minmax(0, 260px) auto;
    align-items: end;
    gap: 8px;
}

.release-form label {
    display: grid;
    gap: 5px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.nickname-form input {
    min-height: 42px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #999;
    border-radius: 4px;
    font: inherit;
}

.release-form input {
    min-height: 42px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #999;
    border-radius: 4px;
    font: inherit;
    text-transform: uppercase;
}

.release-warning {
    margin: 0 0 12px;
    color: #6b1111;
    font-weight: 700;
}

.promo-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    text-align: left;
}

.promo-card .promo-art {
    display: flex;
    justify-content: center;
    margin: 0;
}

.promo-art img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.promo-main h2 {
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 16px;
}

.promo-main h3 {
    margin-bottom: 4px;
    font-size: 22px;
}

.promo-main form {
    margin-top: 12px;
}

.pokemon-code {
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.slot-move-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: 4px;
    min-width: 104px;
    margin-top: 0;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

.team-slot .slot-move-form {
    justify-content: center;
}

.slot-move-form span:first-child {
    width: 100%;
    text-align: center;
}

.slot-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #04e;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.slot-current {
    color: #000;
    font-weight: 700;
}

.boxed-card {
    min-height: 0;
    padding: 8px 10px;
}

.boxed-card h2 {
    margin-bottom: 0;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 12px;
    font-weight: 700;
}

.pagination strong {
    color: #000;
    text-decoration: underline;
}

.slot-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.empty-slot {
    color: #666;
    background: #f8f8f8;
    border-style: dashed;
}

.footer {
    min-height: 92px;
    padding: 8px;
    background: var(--footer);
    border-top: 1px solid var(--line);
    color: #000;
}

.footer p {
    margin-bottom: 3px;
}

@media (max-width: 900px) {
    .header {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        padding: 10px 14px;
    }

    .header-right {
        justify-content: center;
        flex-wrap: wrap;
    }

    .nav {
        gap: 14px;
    }

    .content {
        padding: 26px 16px 50px;
    }

    .home-sections {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hub-summary,
    .hub-grid,
    .beta-signal-grid,
    .beta-stat-grid,
    .beta-queue-grid,
    .beta-dashboard-grid,
    .trainer-hub-hero,
    .trainer-hub-stats,
    .trainer-hub-layout,
    .minigame-layout,
    .cafe-layout,
    .social-grid,
    .dex-detail,
    .profile-layout,
    .pokemon-detail-card {
        grid-template-columns: 1fr;
    }

    .profile-team-grid,
    .profile-badge-grid,
    .profile-box-list,
    .recent-catch-grid,
    .profile-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-staff-tools {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-staff-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .beta-dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .beta-dashboard-heading span {
        white-space: normal;
    }

    .professor-story-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .professor-story-card form,
    .professor-story-card > strong,
    .professor-story-card > span {
        grid-column: 2;
    }

    .professor-story-sprite {
        width: 96px;
        height: 96px;
    }

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

    .pending-move-card {
        grid-template-columns: 1fr;
    }

    .pending-move-actions {
        justify-content: flex-start;
    }

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

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

    .pokemon-row {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .market-pokemon-buy {
        grid-column: 1 / -1;
        justify-items: start;
    }

    .ranking-filter-form {
        align-items: flex-start;
        flex-direction: column;
    }

    .ranking-filter-form label {
        width: 100%;
    }

    .ranking-filter-form select {
        width: 100%;
    }

    .ranking-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .ranking-page-select {
        margin-left: 0;
    }

    .ranking-roster-card {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .ranking-roster-header {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .ranking-roster-header span:nth-child(2),
    .ranking-trainer-meta {
        display: none;
    }

    .ranking-main {
        grid-column: 2;
    }

    .ranking-roster-header span:nth-child(3) {
        grid-column: 2;
    }

    .ranking-roster-header span:nth-child(4) {
        text-align: right;
    }

    .battle-arena,
    .battle-result-grid {
        grid-template-columns: 1fr;
    }

    .battle-vs {
        margin: -6px 0;
    }

    .battle-roster-row {
        grid-template-columns: 24px 56px minmax(0, 1fr);
    }

    .battle-roster-form {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .battle-ready-panel {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .battle-ready-panel img {
        width: 84px;
        height: 84px;
    }

    

.battle-ready-form {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .battle-mode-grid {
        grid-template-columns: 1fr;
    }

    .npc-battle-grid,
    .trainer-battle-search-form {
        grid-template-columns: 1fr;
    }

    .npc-battle-grid {
        grid-template-columns: 1fr;
    }

    .trainer-battle-search-form,
    .trainer-battle-results article {
        flex-direction: column;
        align-items: stretch;
    }

    .battle-mode-card {
        grid-template-columns: 1fr;
    }

    .battle-team-preview-row {
        grid-template-columns: 1fr;
    }

    .battle-team-preview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .trade-picker-grid,
    .trainer-search-form {
        grid-template-columns: 1fr;
    }

    .dex-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pokemon-row img,
    .empty-sprite {
        width: 84px;
        height: 84px;
    }

    .market-pokemon-grid {
        grid-template-columns: 1fr;
    }

    .market-sale-body {
        grid-template-columns: 6px minmax(0, 1fr) 84px;
    }

    .market-sale-action {
        grid-column: 2 / -1;
        min-width: 0;
        justify-items: start;
    }

    .slot-move-form {
        grid-column: 1 / -1;
        justify-content: start;
    }

    .slot-move-form span:first-child {
        width: auto;
        text-align: left;
    }

    .hub-heading {
        display: block;
    }

    .trainer-home {
        display: block;
    }

    .trainer-home-actions {
        margin-top: 12px;
    }

    .cafe-category-head {
        grid-template-columns: minmax(0, 1fr) 58px 58px;
    }

    .cafe-category-head span:last-child {
        display: none;
    }

    .cafe-forum-row {
        grid-template-columns: 42px minmax(0, 1fr) 58px 58px;
    }

    .cafe-forum-last {
        grid-column: 2 / -1;
        width: 100%;
    }

    .cafe-thread-list-head {
        grid-template-columns: minmax(0, 1fr) 70px 70px;
    }

    .cafe-thread-list-head span:nth-child(2) {
        display: none;
    }

    .cafe-thread-row {
        grid-template-columns: 28px minmax(0, 1fr) 70px 70px;
    }

    .cafe-thread-last {
        grid-column: 2 / -1;
    }

    .cafe-reply {
        grid-template-columns: 1fr;
    }

    .cafe-reply aside {
        border-right: 0;
        border-bottom: 1px solid #cbd5e1;
    }

}

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

@media (max-width: 560px) {
    .logo img {
        height: 58px;
    }

    .nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: center;
    }

    .money,
    .button,
    .user-btn {
        min-height: 38px;
        padding: 8px 11px;
    }

    .dex-grid {
        grid-template-columns: 1fr;
    }

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

    .profile-team-grid,
    .profile-badge-grid,
    .profile-box-list,
    .recent-catch-grid,
    .profile-result-grid,
    .move-grid {
        grid-template-columns: 1fr;
    }

    .profile-collapsible-box summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .profile-team-slot {
        min-height: 156px;
    }

    .cafe-category-head {
        grid-template-columns: 1fr;
    }

    .cafe-category-head span {
        display: none;
    }

    .cafe-forum-row {
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
    }

    .cafe-forum-count {
        grid-column: 2;
        text-align: left;
    }

    .cafe-forum-count::before {
        content: "Posts: ";
        color: #555;
        font-weight: 700;
    }

    .cafe-forum-count + .cafe-forum-count {
        display: none;
    }

    .cafe-forum-last {
        grid-column: 2;
    }

    .cafe-thread-list-head {
        grid-template-columns: 1fr;
    }

    .cafe-thread-list-head span:not(:first-child) {
        display: none;
    }

    .cafe-thread-row {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .cafe-thread-last,
    .cafe-thread-count {
        grid-column: 2;
        text-align: left;
    }

    .cafe-thread-count::before {
        color: #555;
        font-weight: 700;
    }

    .cafe-thread-count:nth-of-type(1)::before {
        content: "Replies: ";
    }

    .cafe-thread-count:nth-of-type(2)::before {
        content: "Views: ";
    }

    .dex-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .nickname-form {
        grid-template-columns: 1fr;
    }

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

}






.trainer-check-form {
    margin-top: 14px;
    max-width: 620px;
}

.trainer-check-layout {
    display: grid;
    grid-template-columns: 150px minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.trainer-check-label,
.trainer-check-layout label {
    display: block;
    margin-bottom: 6px;
    color: #26384f;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.trainer-check-code {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #b9c7dc;
    background: #f6f9fe;
    color: #0f2747;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 4px;
}

.trainer-check-layout input {
    width: 100%;
    height: 42px;
    padding: 8px 10px;
    border: 1px solid #9aa7b7;
    font: inherit;
    text-transform: uppercase;
}

.trainer-check-layout .button {
    min-height: 42px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .trainer-check-layout {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.inline-form .button {
    padding: 7px 10px;
}

.gym-region-section {
    margin-top: 18px;
}

.gym-region-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid #d9e0e8;
}

.gym-region-heading h2 {
    margin: 0;
    font-size: 20px;
}

.gym-region-heading p {
    margin: 0;
    color: #334155;
    font-weight: 700;
}

.gym-region-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #d9e0e8;
}

.gym-region-nav a {
    min-width: 86px;
    padding: 7px 12px;
    border: 1px solid #b7c5d8;
    border-radius: 4px;
    background: #fff;
    color: #12396f;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.gym-region-nav a:hover {
    background: #f5f8fc;
    text-decoration: underline;
}

.gym-region-nav a.active {
    background: #2f405b;
    border-color: #2f405b;
    color: #fff;
    text-decoration: none;
}