* {
    box-sizing: border-box;
}

@font-face {
  font-family: 'Pokemon';
  src: url('includes/Pokemon Hollow.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
    font-family: 'Pokemon', Arial, Helvetica, sans-serif;
    background: #f4f4f4;
    margin: 0;
    padding: 0 20px 40px;
    color: #222;
}

header {
    padding: 30px 0 10px;
    text-align: center;
}

header h1 {
    margin: 0 0 5px;
}

.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 15px 0 5px;
}

.search-bar input[type="text"] {
    width: 100%;
    max-width: 320px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.search-bar button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #333;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.search-bar button:hover {
    background: #555;
}

.search-bar .clear-search {
    color: #777;
    text-decoration: none;
    font-size: 0.9em;
}

.search-bar .clear-search:hover {
    text-decoration: underline;
}

.loading-indicator {
    text-align: center;
    color: #777;
    margin: 20px 0;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
    gap: 1.5em;
    max-width: 1000px;
    margin: 20px auto;
}

.set {
	/* max-width: 10em; */
	grid-column: 1 / -1;
	height: 4em;
	text-align: center;
}

.set img {
	height: 100%;
	font-weight: bold;
    font-size: 2em;
}

.card {
	/* max-width: 10em; */
    background: #fff;
    border: 3px solid #f4f4f4;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

.card .favorite {
	border-color: gold
}

.card img {
    width: 100%;
	min-height: 170px;
    object-fit: contain;
    background: #eee;
    display: block;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
}

.pagination a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.pagination a:hover {
    text-decoration: underline;
}

.card-title {
    padding: 0.5em 1em;
}

.card-body {
    padding: 6px 6px;
}

.card-body h2, .card-title h2 {
    font-size: 1.1em;
    margin: 0 0 0px;
	text-align: center;
}

.card-body h3, .card-title h3 {
    font-size: 0.9em;
    margin: 0 0 0px;
    text-align: center;
}

.card-body h4, .card-title h4 {
    font-size: 0.7em;
    margin: 0 0 0px;
	text-align: center;
}

.card-body p, .card-title p {
    margin: 0;
    font-size: 0.7em;
	text-align: center;
    color: #555;
	padding: 0;
}

.empty-state {
    text-align: center;
    color: #777;
    margin-top: 60px;
}

/* ---- Search/filter/sort toolbar (Fields / Filters / Sort / Clear all) ---- */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 5px 0 0;
}

.toolbar-btn {
    cursor: pointer;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-weight: bold;
    font-size: 0.9em;
    font-family: inherit;
    user-select: none;
}

.toolbar-btn::after {
    content: ' \25BE'; /* ▾ */
}

.toolbar-btn.open {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Each open panel is a normal block-level section appended to the page
   (not a floating popup), so it pushes the gallery down instead of
   overflowing off the side of the viewport. */
.toolbar-panel {
    max-width: 600px;
    margin: 12px auto 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 14px 18px;
    text-align: left;
}

.toolbar-panel fieldset {
    border: none;
    border-top: 1px solid #eee;
    margin: 0 0 10px;
    padding: 10px 0 0;
}

.toolbar-panel fieldset:first-child {
    border-top: none;
    padding-top: 0;
}

.toolbar-panel legend {
    font-size: 0.8em;
    font-weight: bold;
    color: #777;
    padding: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    grid-column: 1 / -1; /* span every column of whichever grid fieldset it's in */
}

/* Three-column layout for groups of toggle buttons - used for the Fields
   panel's own button list and for each fieldset in the Filters panel.
   Not applied to the panels themselves (#panel-fields etc.), since those
   are also the elements toggled via the `hidden` attribute - putting
   `display: grid` directly on a `hidden` element would win over the
   browser's default `[hidden] { display: none }` and leave it visible. */
.toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 10px;
}

.toggle-btn,
.three-way,
.sort-set-btn,
.sort-field-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
    cursor: pointer;
    font-size: 0.9em;
    font-family: inherit;
}

/* Sort by Sets: 2 columns (Ascending/Descending on top, the two Off
   buttons below). */
.sort-set-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 10px;
}

/* Sort by: 4 columns. */
.sort-field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 10px;
}

.toggle-btn[aria-pressed="true"],
.three-way[data-state="yes"],
.sort-set-btn.active,
.sort-field-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.three-way[data-state="no"] {
    background: #f9d9d9;
    border-color: #e05555;
}

/* "Off excluding duplicates" - a separate button from plain "Off" (see
   index.php), flagged in red the same way the "no"/"only" three-way
   states are, so it reads as a distinct, deliberate choice. It's also
   the one a Sort by field can select automatically. */
.sort-set-btn.limited {
    background: #f9d9d9;
    border-color: #e05555;
}

/* Energy-type icon shown inline before a button's label (Pokémon type,
   Attack energy). */
.type-icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
    margin-right: 4px;
}

/* Rarity icon(s) shown inline before a rarity button's label - a button
   can have several (e.g. "Three Diamond" = three copies in a row). */
.rarity-icon {
    height: 1em;
    vertical-align: middle;
    margin-right: 2px;
}

/* "Group" buttons (All Diamonds / All Rarities / All Sets / All Retreat
   Costs) - stateless, so styled distinctly (dashed border, tinted
   background) from the toggles they act on. Sits in its own full-width
   row above the buttons it targets. */
.group-btn-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.group-btn {
    flex: 1 1 auto;
    padding: 6px 10px;
    border: 1px dashed #999;
    border-radius: 4px;
    background: #eaf0f7;
    color: #333;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: bold;
    font-family: inherit;
}

.group-btn:hover {
    background: #dbe6f1;
}

.four-column-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}


/* Row of 0-4 "total attack cost" buttons at the top of the Attack
   energy panel - always 5 across, regardless of the fieldset's own
   column count. */
.five-column-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.field-checkbox, .set-checkbox, .card-type-checkbox, .pokemon-type-checkbox, 
.stage-checkbox, .points-checkbox, #filter-has-ability, .attack-cost-checkbox, 
.attack-energy-checkbox, .weakness-checkbox, .retreat-checkbox, .rarity-checkbox, 
.sort-set-btn, .sort-field-btn {
	text-align: center;
}

.set-checkbox {
	text-align: center;
}

.toggle-btn:disabled,
.three-way:disabled,
.sort-set-btn:disabled,
.sort-field-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f9f9f9;
    color: #999;
}

.sort-dir-indicator {
    font-weight: bolder;
    float: right;
}

#clear-all {
    color: #a33;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    padding: 8px 4px;
}

#clear-all:hover {
    text-decoration: underline;
}

/* Flags unapplied filter/field/sort changes - click either Search
   button (top bar, or the duplicate at the bottom of the Filters
   panel) - or hit Enter - to actually re-query with them. Both
   buttons are kept in sync by markDirty() in index.php. */
.search-bar button.pending,
.filters-search-btn.pending {
    background: #1565c0;
}

.search-bar button.pending:hover,
.filters-search-btn.pending:hover {
    background: #0d47a1;
}

/* Momentary gold ring on the Search button(s) every time an edit marks
   them pending - draws the eye to it without leaving a permanent mark
   (fades out over the animation, doesn't loop). */
@keyframes pending-flash {
    0%   { box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.9); }
    100% { box-shadow: 0 0 0 3px rgba(255, 200, 0, 0); }
}

.search-bar button.flash,
.filters-search-btn.flash {
    animation: pending-flash 1s ease-out;
}

/* Duplicate Search button at the bottom of the Filters panel, which
   otherwise requires scrolling back up to the search bar to apply. */
.filters-search-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background: #333;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    font-family: inherit;
}

.filters-search-btn:hover {
    background: #555;
}

/* ---- Card zoom overlay: click a card to fill the screen (image plus
   an info panel below it), click the backdrop (outside the enlarged
   card) to close it ---- */

.card {
    cursor: zoom-in;
}

.card-zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 8px;
    cursor: zoom-out;
}

/* `display: flex` above beats the browser's default `[hidden] {
   display: none }` (author styles win over the UA stylesheet regardless
   of matching specificity), which is exactly why the overlay was stuck
   open on page load - this rule (two selectors = higher specificity than
   `.card-zoom-overlay` alone) restores the hidden behavior. */
.card-zoom-overlay[hidden] {
    display: none;
}

/* Wraps the enlarged image and its info panel as a single unit, so the
   overlay's own centering (above) centers the pair together - both
   vertically and horizontally - rather than just the image on its own. */
.card-zoom-content {
	text-align: center;
    overflow-y: auto;
    cursor: default;
}

/* No `width`/`height` here - letting the image size itself from just
   `max-width`/`max-height` (a replaced element's default sizing
   algorithm honors its intrinsic aspect ratio against those bounds) is
   what makes it "fill most of the screen" on any screen size/aspect
   ratio: whichever of the two bounds is tighter for a given viewport
   ends up driving the size, without ever distorting or needing
   `object-fit` to correct a mismatched box (there isn't one - the img's
   own box already matches its visible content, which the panel-width
   sync below in index.php depends on). 90vh leaves just enough of the
   remaining 97vh for a typical-length info panel underneath; the
   overflow-y above is the fallback for the rare very-long description
   that needs more room than that. */
.card-zoom-content img {
	width: 345px;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    cursor: default;
}

/* Width is set inline (in px) by index.php once the zoomed image has
   loaded, to match its actual rendered width exactly - the image's
   width varies with both its aspect ratio and the viewport (see above),
   so no fixed or percentage width here would reliably track it. The
   rule below is just the pre-JS/fallback state, and a ceiling so the
   panel can never exceed the viewport even before that sync runs. */
.card-zoom-panel {
	width: 345px;
    margin-top: 12px;
    padding: 10px 16px;
    background: #fff;
	border: 0.5em solid gold;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    text-align: center;
    overflow-wrap: anywhere;
}

.card-zoom-panel h2,
.card-zoom-panel h3 {
    margin: 0 0 4px;
}

.card-zoom-panel h2 {
    font-size: 1.2em;
}

.card-zoom-panel h3 {
    font-size: 1em;
    font-weight: normal;
    color: #555;
}

.card-zoom-panel p {
    margin: 6px 0 0;
    font-size: 0.9em;
    color: #333;
}