/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --caught-color: #501050;
    --uncaught-color: #202020;
    --unobtainable-color: #121212;
    --surface: #1c1b1f;
    --surface-variant: #49454f;
    --on-surface: #e6e1e5;
    --on-surface-variant: #cac4d0;
    --primary: #d0bcff;
    --on-primary: #381e72;
    --secondary: #ccc2dc;
    --outline: #938f99;
    --outline-variant: #49454f;
    --background: #1c1b1f;
    --surface-container: #211f26;
    --surface-container-high: #2b2930;
    --nav-height: 56px;
    --search-bar-height: 56px;
    --header-height: 48px;
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--background);
    color: var(--on-surface);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
    overflow: hidden;
}

#main-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ===== Screens ===== */
.screen {
    display: none;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.screen.active {
    display: flex;
}

/* ===== Pokedex Header ===== */
.pokedex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    height: var(--header-height);
    flex-shrink: 0;
}

.pokedex-header h2 {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Icon Button ===== */
.icon-btn {
    background: none;
    border: none;
    color: var(--on-surface);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.icon-btn:hover {
    background: rgba(255,255,255,0.08);
}

.icon-btn:active {
    background: rgba(255,255,255,0.12);
}

/* ===== Search Bar ===== */
.search-bar {
    display: flex;
    align-items: center;
    /* Replace 'padding: 1px;' with the following: */
    padding: 0 8px;
    gap: 8px;
    background: var(--surface-container-high);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    flex-shrink: 0;
    height: var(--search-bar-height);
}

    .search-bar input {
        flex: 1;
        min-width: 0; /* Keep this line */
        background: transparent;
        border: none;
        color: var(--on-surface);
        font-size: 16px;
        padding: 12px 0; /* Adjust padding to remove horizontal space managed by parent */
        outline: none;
    }


.search-bar input::placeholder {
    color: var(--on-surface-variant);
}

.uncaught-toggle-wrapper {
    background: var(--surface-variant);
    border-radius: 8px;
    /* margin-right: 8px; <-- REMOVE this line */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    flex-shrink: 0; /* Add this to prevent this wrapper from shrinking */
}

.uncaught-toggle-wrapper .icon-btn.active {
    color: var(--primary);
}

.pokeball-icon {
    display: block;
}

.hidden {
    display: none !important;
}

/* ===== Grid Wrapper ===== */
.grid-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
}

/* ===== Pokemon Grid ===== */
.pokemon-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.pokemon-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Compact Grid: 6 columns, tight spacing - uses flexbox wrap to avoid
   CSS grid row compression in a definite-height scroll container */
.pokemon-grid.compact {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 2px;
    align-content: flex-start;
}

.pokemon-grid.compact > .box-header {
    width: 100%;
    flex-shrink: 0;
}

.pokemon-grid.compact > .grid-bottom-spacer {
    width: 100%;
    flex-shrink: 0;
}

/* Spacious Grid: 6 columns, rounded corners */
.pokemon-grid.spacious {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    padding: 4px 2px;
    align-content: start;
}

/* ===== Box Header ===== */
.box-header {
    grid-column: 1 / -1;
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface);
}

/* ===== Pokemon Cell (Compact) ===== */
.pokemon-grid.compact .pokemon-cell {
    width: calc(100% / 6);
    aspect-ratio: 1;
    cursor: pointer;
    overflow: hidden;
    border: 0.5px solid rgba(156, 156, 156, 0.3);
    flex-shrink: 0;
}

/* Mirrors .bingo-card-inner */
.pokemon-grid.compact .pokemon-cell .card-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transition: background-color 0.4s ease;
    box-sizing: border-box;
}

/* Mirrors .bingo-img-container */
.pokemon-grid.compact .pokemon-cell .img-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 4px;
}

/* Mirrors .bingo-img */
.pokemon-grid.compact .pokemon-cell .pokemon-img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
}

/* Mirrors .bingo-name */
.pokemon-grid.compact .pokemon-cell .pokemon-name {
    font-size: 10px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 4px 4px;
    color: var(--on-surface);
    flex-shrink: 0;
}

/* ===== Pokemon Cell (Spacious) ===== */
.pokemon-grid.spacious .pokemon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 2px;
    transition: background-color 0.4s ease;
}

.pokemon-grid.spacious .pokemon-cell .card-inner {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    overflow: hidden;
    transition: background-color 0.4s ease;
}

.pokemon-grid.spacious .pokemon-cell .pokemon-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.pokemon-grid.spacious .pokemon-cell .pokemon-name {
    font-size: 10px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 0 2px;
    color: var(--on-surface);
}

/* Unobtainable cursor */
.pokemon-cell.unobtainable {
    cursor: default;
    opacity: 0.7;
}

/* ===== Grid padding at bottom for gen tabs ===== */
.grid-bottom-spacer {
    grid-column: 1 / -1;
    height: 60px;
}

/* ===== Custom Scrollbar ===== */
.scrollbar-track {
    width: 6px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}

.scrollbar-track.visible {
    opacity: 1;
}

.scrollbar-thumb {
    width: 6px;
    min-height: 20px;
    background: rgba(255,255,255,0.4);
    border-radius: 3px;
    position: absolute;
    right: 0;
    cursor: grab;
    transition: background 0.15s;
}

.scrollbar-thumb:hover,
.scrollbar-thumb:active {
    background: rgba(255,255,255,0.6);
    width: 10px;
}

/* ===== Generation Tabs ===== */
.gen-tabs-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    pointer-events: none;
}

.gen-tabs-handle {
    width: 60px;
    height: 24px;
    background: var(--surface-variant);
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    position: relative;
    z-index: 21;
}

.gen-tabs-handle .material-symbols-outlined {
    font-size: 20px;
    color: var(--on-surface);
}

.gen-tabs-drawer {
    background: var(--surface-variant);
    width: 100%;
    padding: 4px 8px 4px;
    border-radius: 8px 8px 0 0;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gen-tabs-drawer.hidden {
    display: none;
}

.gen-tabs-row {
    display: flex;
    justify-content: space-around;
    gap: 2px;
}

.gen-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: white;
    margin: 0 1px;
    transition: filter 0.15s;
}

.gen-btn:hover {
    filter: brightness(1.2);
}

.gen-btn:active {
    filter: brightness(0.8);
}
/* ===== Responsive: Landscape Mode ===== */
@media (orientation: landscape) {
    .gen-tabs-drawer {
        flex-direction: row; /* Change flex direction to arrange items horizontally */
        justify-content: space-around; /* Distribute buttons evenly */
        align-items: center; /* Vertically center the buttons */
        height: 8vh; /* Adjust height based on viewport height */
        min-height: 48px; /* Set a minimum height to prevent it from being too small */
        gap: 4px; /* Adjust the gap between buttons */
    }

    /* Hide the individual row containers in landscape as they are no longer needed */
    .gen-tabs-row {
        display: contents;
    }

    .gen-btn {
        aspect-ratio: 1 / 1; /* Make the button square */
        height: 100%; /* Fill the height of the parent drawer */
        flex-grow: 1; /* Allow buttons to grow and fill the space */
        flex-basis: 0; /* Distribute space evenly among buttons */
        padding: 4px; /* Adjust padding for a better fit */
    }

    /* Adjust the bottom spacer for the grid to avoid overlap with the taller tab drawer */
    .grid-bottom-spacer {
        height: calc(8vh + 8px); /* Match the drawer height plus padding */
        min-height: 56px; /* Match the drawer min-height plus padding */
    }
}
/* ===== Empty State ===== */
.empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: var(--on-surface-variant);
}

/* ===== Snackbar ===== */
.snackbar {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-container-high);
    color: var(--on-surface);
    padding: 12px 12px 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 100;
    font-size: 14px;
    white-space: nowrap;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
}

.snackbar-text {
    flex: 1;
    white-space: normal;
    word-break: break-word;
}

.snackbar-close {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
    font-weight: 700;
}

.snackbar-close:hover {
    background: rgba(255,255,255,0.1);
}

.snackbar.show {
    display: flex;
    animation: snackbar-in 0.3s ease, snackbar-out 0.3s ease 2.5s forwards;
}

@keyframes snackbar-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes snackbar-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ===== Inline Settings Status Messages ===== */
/* Matches Android's colored inline text for error/success states */
.settings-status-msg {
    font-size: 13px;
    margin-top: 8px;
    padding: 6px 0;
    text-align: center;
    display: none;
}

.settings-status-msg:not(:empty) {
    display: block;
}

.settings-status-msg.success {
    color: var(--primary);
}

.settings-status-msg.error {
    color: #f44336;
}

.settings-status-msg.info {
    color: var(--on-surface-variant);
}

/* ===== Bottom Navigation ===== */
.bottom-nav {
    display: flex;
    height: var(--nav-height);
    background: var(--surface-container);
    border-top: 1px solid var(--outline-variant);
    flex-shrink: 0;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 0;
    transition: color 0.15s;
}

.nav-item.active {
    color: var(--primary);
}

.nav-item .material-symbols-outlined {
    font-size: 24px;
}

.nav-label {
    font-size: 11px;
}

/* ===== Settings Screen ===== */
.settings-content {
    padding: 16px;
    overflow-y: auto;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
}

@media (orientation: landscape) {
    .settings-content {
        max-width: 50%;
    }
}

.settings-content h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.settings-section-card {
    background: var(--surface-container-high);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.settings-section-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.settings-section-header .material-symbols-outlined {
    font-size: 24px;
    color: var(--primary);
}

/* Color Setting */
.color-setting {
    margin-bottom: 12px;
}

.color-setting label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--on-surface-variant);
}

.color-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.color-input-row .hash {
    font-size: 16px;
    color: var(--on-surface-variant);
}

.color-input-row input {
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 6px;
    color: var(--on-surface);
    padding: 8px 12px;
    font-size: 14px;
    font-family: monospace;
    width: 100px;
    outline: none;
}

.color-input-row input:focus {
    border-color: var(--primary);
}

.color-preview {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--outline);
    margin-left: 8px;
}

/* Save Button */
.save-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: filter 0.15s;
}

.save-btn:hover {
    filter: brightness(1.1);
}

.save-btn:active {
    filter: brightness(0.9);
}

/* Setting Toggle */
.setting-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.setting-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    padding-right: 12px;
}

.setting-label span:first-child {
    font-size: 14px;
    font-weight: 500;
}

.setting-desc {
    font-size: 12px;
    color: var(--on-surface-variant);
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--outline);
    border-radius: 14px;
    transition: 0.3s;
}

.slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.switch input:checked + .slider {
    background: var(--primary);
}

.switch input:checked + .slider::before {
    transform: translateX(20px);
}

/* ===== Completion Stats ===== */
/* Matches Android PokedexCompletionCard — surfaceVariant Card with elevation */
.completion-card {
    background: var(--surface-variant);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.completion-card .completion-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.completion-card .completion-bar-bg {
    height: 8px;
    background: var(--surface-container-high);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.completion-card .completion-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--primary);
    transition: width 0.5s ease;
}

/* Two-column stats row: count left, percentage right (primary) */
.completion-card .completion-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.completion-card .completion-count {
    font-size: 14px;
    font-weight: 500;
}

.completion-card .completion-pct {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
}

/* Sub-section header ("Active Filter Completion") matching Android titleMedium */
.completion-subsection-header {
    font-size: 15px;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 8px;
    color: var(--on-surface);
}

/* Settings Divider */
.settings-divider {
    border: none;
    border-top: 1px solid var(--outline-variant);
    margin: 8px 0;
}

/* Settings Select Dropdown */
.settings-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 6px;
    color: var(--on-surface);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    appearance: auto;
}

.settings-select:focus {
    border-color: var(--primary);
}

/* Settings Text Input */
.settings-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 6px;
    color: var(--on-surface);
    font-size: 14px;
    font-family: monospace;
    outline: none;
}

.settings-input:focus {
    border-color: var(--primary);
}

/* Settings textarea for filter content */
.settings-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 300px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 6px;
    color: var(--on-surface);
    font-size: 12px;
    font-family: monospace;
    line-height: 1.5;
    outline: none;
    resize: vertical;
}

/* Setting item label used in bingo etc. */
.setting-item-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface);
    margin-bottom: 6px;
    display: block;
}

/* Bingo code input/output area */
.bingo-code-area {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 6px;
    color: var(--on-surface);
    font-size: 12px;
    font-family: monospace;
    min-height: 60px;
    resize: vertical;
    outline: none;
}

.bingo-code-area:focus {
    border-color: var(--primary);
}

/* ===== Pokédex landscape side panel ===== */
#pokedex-main-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.pokedex-side-panel {
    display: none;
}

/* Save / Load icon buttons in search bar */
.pokedex-io-btn {
    background: var(--surface-variant);
    border-radius: 8px;
    margin-right: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

@media (orientation: landscape) {
        /* Add right padding in list view to accommodate the side panel */
        .pokemon-grid.list-view {
            padding-right: 20%;
        }

        /* Pokédex box view: restore centered grid — same 20/60/20 split as before */
        .pokemon-grid.compact:not(.list-view),
        .pokemon-grid.spacious:not(.list-view) {
            padding-left: 30%;
            padding-right: 30%;
        }

        /* Side panel fills the right 20% empty space (box view only) */
        .pokemon-grid ~ .pokedex-side-panel {
            display: flex;
            flex-direction: column;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 20%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: var(--surface-container);
            padding: 12px;
            z-index: 5;
        }

        /* ===== Landscape Adjustments ===== */
        @media (orientation: landscape) {
            .pokedex-header,
            .search-bar {
                padding-left: 30%;
                padding-right: 30%;
            }

            /* Apply padding to the container of the generation buttons */
            .gen-tabs-drawer {
                padding-left: 20%;
                padding-right: 20%;
                box-sizing: border-box; /* Ensures padding is included in the element's total width */
            }
        }

        /* Move scrollbar to the right edge of actual grid content (left of side panel) */
        .pokemon-grid:not(.list-view) ~ .scrollbar-track {
            right: 30%;
        }
    }

/* ===== Counter landscape side panel ===== */
.counter-landscape-spacer {
    display: none;
}

#counter-side-panel {
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (orientation: landscape) {
    /* Three-column layout: [empty spacer] [centered content] [side panel] */
    #counter-screen {
        flex-direction: row;
        align-items: stretch;
    }

    /* Left spacer mirrors the right panel — keeps content centered */
    .counter-landscape-spacer {
        display: block;
        flex: 1;
    }

    /* Content stays at its natural max-width, centered between spacer and panel */
    #counter-screen .counter-content {
        flex: 0 1 600px;
        min-width: 0;
    }

    /* Side panel takes the right empty space reactively */
    #counter-side-panel {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--surface-container);
        padding: 8px;
        border-left: 1px solid var(--outline-variant);
    }
}

/* List View mode (when uncaught only) */
/* Spacious list-view uses CSS grid */
.pokemon-grid.spacious.list-view {
    grid-template-columns: repeat(5, 1fr);
}

@media (min-width: 768px) {
    .pokemon-grid.spacious.list-view {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 1024px) {
    .pokemon-grid.spacious.list-view {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Compact list-view uses flexbox width overrides */
.pokemon-grid.compact.list-view .pokemon-cell {
    width: calc(100% / 5);
}

@media (min-width: 768px) {
    .pokemon-grid.compact.list-view .pokemon-cell {
        width: calc(100% / 8);
    }
}

@media (min-width: 1024px) {
    .pokemon-grid.compact.list-view .pokemon-cell {
        width: calc(100% / 12);
    }
}
/* ===== Bingo Screen ===== */
#bingo-screen {
    background: var(--surface-container);
}

.bingo-content {
    padding: 16px;
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    background: var(--background);
}

@media (orientation: landscape) {
    .bingo-content {
        max-width: 100%;
    }
}
.bingo-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-bottom: 8px;
}

.bingo-title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.bingo-settings-btn {
    color: var(--primary);
}

.bingo-filter-text {
    font-size: 13px;
    color: var(--primary);
    text-align: center;
    margin-bottom: 8px;
}

.bingo-elapsed-text {
    font-size: 12px;
    color: var(--on-surface-variant);
    text-align: center;
    margin-bottom: 8px;
}

.bingo-error-text {
    font-size: 13px;
    color: #f44336;
    text-align: center;
    margin-bottom: 8px;
}

.bingo-empty-text {
    font-size: 14px;
    color: var(--on-surface-variant);
    text-align: center;
    padding: 32px 16px;
}

/* Bingo Grid */
.bingo-grid {
    display: grid;
    gap: 0;
    width: 100%;
    max-width: 500px;
    border: 1px solid rgba(128, 128, 128, 0.3);
}

.bingo-card {
    position: relative;
    cursor: pointer;
    aspect-ratio: 1;
    overflow: hidden;
    border: 0.5px solid rgba(128, 128, 128, 0.3);
}

.bingo-card.empty {
    cursor: default;
}

.bingo-card-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.4s ease;
    box-sizing: border-box;
}

.bingo-img-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 4px;
}

.bingo-img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
}

.bingo-name {
    font-size: 10px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 4px 4px;
    color: var(--on-surface);
    flex-shrink: 0;
}

/* Landscape bingo: size the grid to fill the available viewport height */
@media (orientation: landscape) {
    .bingo-grid {
        /* Allow the grid to grow up to the height the screen affords, minus padding
           and the header rows (title ~44px + optional text ~56px + buffer = ~140px). */
        max-width: calc(100vh - 190px);
    }
}

/* ===== Counter Screen ===== */
.counter-content {
    padding: 0 8px 0;
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    width: 100%;
}

.counter-section {
    padding: 8px 8px 0;
}

.counter-header-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}

.counter-saved-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--on-surface);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 4px;
    flex: 1;
}

.counter-saved-toggle .material-symbols-outlined {
    font-size: 20px;
}
/* Saved Pokemon Grid */
.saved-pokemon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 8px;
}

.saved-pokemon-item {
    width: calc(20% - 4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Landscape side panel: 2 columns matching Android ITEMS_PER_ROW_LANDSCAPE = 2 */
.saved-pokemon-grid.landscape {
    /* 1. Switch the container to a grid layout */
    display: grid;
    /* 2. Define exactly two flexible columns that share the space equally */
    grid-template-columns: 1fr 1fr;
    /* 3. Center the items within their grid columns */
    justify-items: center;
    /* 4. Use a percentage for the item width relative to the column. Adjust as needed. */
    --item-width-percentage: 40%;
}

/* Target items inside the landscape grid to control their size */
.saved-pokemon-grid.landscape .saved-pokemon-item {
    /* Use the variable to set the width */
    width: var(--item-width-percentage);
    height: auto; /* Allow height to adjust based on content */
}


.saved-pokemon-item.empty {
    opacity: 0.3;
}

.saved-pokemon-card {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.3s;
}

.saved-pokemon-card.empty-slot {
    background: var(--surface-container-high);
    border: 2px dashed var(--outline-variant);
    cursor: default;
}

.saved-pokemon-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.saved-pokemon-remove {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #f44336;
    border: none;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
}

.saved-pokemon-name {
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 2px 0;
    color: var(--on-surface-variant);
}

/* Counter Card */
.counter-text-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
}


.counter-card {
    background: var(--surface-container-high);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 8px 0;
}

.counter-card-title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
}

/* Method dropdown */
.counter-method-row {
    padding: 0 8px 8px;
}

.counter-method-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: 6px;
    color: var(--on-surface);
    font-size: 14px;
    outline: none;
    cursor: pointer;
    appearance: auto;
}

.counter-method-select:focus {
    border-color: var(--primary);
}

/* Pokemon Display (hunt target + recommendation) */
.counter-pokemon-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
}

.counter-pokemon-img-box {
    width: 130px;
    height: 130px;
    background: var(--surface-variant);
    border-radius: 12px;
    border: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.counter-pokemon-img-box img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.counter-pokemon-name {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
}

/* Counter Controls */
.counter-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    position: relative;
}

.counter-btn {
    border: 2px solid var(--outline);
    background: none;
    color: var(--on-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.counter-btn:hover {
    background: rgba(255,255,255,0.08);
}

.counter-btn:active {
    background: rgba(255,255,255,0.12);
}

.counter-btn-dec {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.counter-btn-inc {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    position: relative;
}

.counter-btn-inc:hover {
    filter: brightness(1.1);
}

.counter-btn-inc:active {
    filter: brightness(0.9);
}

.counter-btn-inc .material-symbols-outlined {
    font-size: 36px;
}

.counter-inc-badge {
    font-size: 11px;
    font-weight: 700;
}

.counter-count {
    font-size: 48px;
    font-weight: 300;
    text-align: center;
    cursor: pointer;
    padding: 0 16px;
    min-width: 80px;
}

.counter-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    margin: 8px auto 0;
}

/* Counter empty hunt state */
.counter-empty-hunt {
    padding: 32px 16px;
    text-align: center;
}

.counter-empty-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--on-surface-variant);
    margin-bottom: 4px;
}

.counter-empty-sub {
    font-size: 14px;
    color: var(--on-surface-variant);
}

/* Recommendation buttons */
.counter-rec-btns {
    display: flex;
    gap: 12px;
    padding: 0 16px;
    align-items: center;
}

.counter-rec-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.counter-rec-status {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
}

.counter-rec-status.error {
    color: #f44336;
}

.counter-rec-empty {
    text-align: center;
    padding: 16px;
}

.counter-rec-title {
    font-size: 18px;
    font-weight: 600;
}

.counter-rec-sub {
    font-size: 14px;
    color: var(--on-surface-variant);
    margin-top: 4px;
}

/* ===== Hunt History Drawer ===== */
.drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.drawer-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.hunt-history-drawer {
    position: absolute;
    top: 0;
    left: -90%; /* Start off-screen */
    width: 90%; /* Width for portrait mode */
    height: 100%;
    background: var(--surface-container);
    z-index: 60;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 4px 0 12px rgba(0,0,0,0.4);
}

/* Media query for landscape orientation */
@media (orientation: landscape) {
    .hunt-history-drawer {
        width: 30%; /* Width for landscape mode */
        left: -30%; /* Adjust starting position for landscape */
    }
}
.hunt-history-drawer.open {
    left: 0;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.drawer-header h3 {
    font-size: 18px;
    font-weight: 700;
}

.drawer-divider {
    height: 1px;
    background: var(--outline-variant);
}

.drawer-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--on-surface-variant);
    font-size: 14px;
}

.drawer-hunt-list {
    padding: 8px 16px;
}

.drawer-hunt-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--surface-container-high);
    border-radius: 12px;
}

.drawer-hunt-img-col {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: var(--surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.drawer-hunt-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.drawer-hunt-info {
    flex: 1;
    min-width: 0;
}

.drawer-hunt-name {
    font-size: 12px;
    color: var(--on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-hunt-count {
    font-size: 15px;
    font-weight: 700;
}

.drawer-hunt-method {
    font-size: 11px;
    color: var(--on-surface-variant);
    margin-top: 1px;
}

.drawer-hunt-status-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.drawer-hunt-status {
    font-size: 11px;
    font-weight: 700;
}

.drawer-hunt-status.caught {
    color: #4CAF50;
}

.drawer-hunt-status.ongoing {
    color: var(--primary);
}

.drawer-hunt-date {
    font-size: 9px;
    color: var(--on-surface-variant);
}

.drawer-hunt-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 2px;
}

.drawer-hunt-action-row {
    display: flex;
    gap: 0;
}

.drawer-delete-btn .material-symbols-outlined {
    color: #f44336;
}

/* ===== Counter landscape saved-list panel header ===== */
/* Matches Android CounterScreen landscape side column header */
.counter-side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
}

.counter-side-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--on-surface);
}

/* Inner "Long-Press to hunt" header row (matches Android SavedPokemonHorizontalList header) */
.saved-list-inner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 8px;
}

.saved-list-inner-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--on-surface);
}

/* Inner card wrapper for landscape saved list (matches Android isLandscape Card wrapper) */
.saved-list-card {
    background: var(--surface-container-high);
    border-radius: 12px;
    padding: 8px;
    margin-top: 4px;
}

/* Icon-style clear all button (matches Android DeleteSweep IconButton) */
.saved-list-clear-btn {
    background: none;
    border: none;
    color: var(--on-surface);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.saved-list-clear-btn:hover {
    background: rgba(255,255,255,0.08);
}

.saved-list-clear-btn .material-symbols-outlined {
    font-size: 20px;
}

/* ===== Counter & Settings Side Bars (consistent with pokedex) ===== */
#counter-screen,
#settings-screen {
    background: var(--background);
}

#counter-screen .counter-content,
#settings-screen .settings-content {
    background: var(--background);
}

/* ===== Save/Load Info Modal ===== */
.info-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.info-modal-overlay.hidden {
    display: none !important;
}

.info-modal {
    background: var(--surface-container-high);
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--outline-variant);
    flex-shrink: 0;
}

.info-modal-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--on-surface);
}

.info-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-modal-section {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.info-modal-icon {
    font-size: 24px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.info-modal-section strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface);
    margin-bottom: 4px;
}

.info-modal-section p {
    font-size: 13px;
    color: var(--on-surface-variant);
    line-height: 1.5;
}

.info-modal-section code {
    background: var(--surface-variant);
    border-radius: 4px;
    padding: 1px 4px;
    font-family: monospace;
    font-size: 12px;
    color: var(--primary);
}

/* ===== Saved List Empty State ===== */
.saved-list-empty {
    text-align: center;
    padding: 16px 12px;
    color: var(--on-surface-variant);
}

.saved-list-empty-title {
    font-size: 14px;
    margin-bottom: 6px;
}

.saved-list-empty-sub {
    font-size: 13px;
    line-height: 1.4;
}

/* ===== Context Menu ===== */
.context-menu {
    position: fixed;
    z-index: 9999;
    background: var(--surface-container-high);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    min-width: 180px;
    overflow: hidden;
}

.context-menu.hidden {
    display: none;
}

.context-menu-list {
    list-style: none;
    padding: 4px 0;
    margin: 0;
}

.context-menu-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.context-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.context-menu-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--on-surface-variant);
}