/* ============================================================================
   LIVE-EDITABLE CSS - Edit this file directly on the server without rebuilding!

   Note: Tailwind utilities (@apply, @layer, etc.) won't work here.
   Use plain CSS only.
   ============================================================================ */

/* ============================================================================
   PROSE STYLES
   ============================================================================ */
.prose img {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

.prose strong,
.prose b {
  color: #e60000;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose table {
  table-layout: auto;
  width: 100%;
  min-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  border: 1px solid #1a1a1a0a;
  margin: 1.1em auto;
  border-collapse: collapse;
}

.prose tbody tr {
  border-bottom-width: 0;
}

.prose tbody td,
.prose tbody th,
.prose tfoot td,
.prose tfoot th,
.prose thead td,
.prose thead th {
  vertical-align: middle;
  font-size: 0.8rem;
  border-spacing: 0;
  table-layout: fixed;
  line-height: initial;
  text-align: inherit;
  border: 1px solid #1a1a1a0a;
  padding: 10px;
}

.prose th {
  background-color: #8f8f8f29;
  color: #18181b;
}

.dark .prose th {
  background-color: #0b0f1836;
  color: #f9fafb;
}

.prose p {
  margin-top: 1.1em;
  margin-bottom: 1.1em;
}

.prose a {
  color: #01348e;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 1px dashed #10101033;
}

.prose a:hover,
.prose a:focus-visible {
  border-bottom: 1px dashed #10101060;
}

.dark .prose a {
  color: #7bb9d6;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.dark .prose a:hover,
.dark .prose a:focus-visible {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.33);
}

.prose li p {
  margin-top: 0;
  margin-bottom: 0;
}

.prose h2:before {
  width: 22px;
  height: 22px;
  content: '';
  vertical-align: -3px;
  margin-right: 12px;
  display: inline-block;
  background: url('/static/pokemon/pokeball-icon-red.svg') no-repeat left;
  background-size: 22px;
}

.dark .prose h2:before {
  background-image: url('/static/pokemon/pokeball-icon-orange.svg');
}

.prose h3 {
  text-align: center;
}


.dark .prose table {
  border: 1px solid #ffffff0f;
}

.dark .prose th,
.dark .prose td {
  border: 1px solid #ffffff0f;
}

.dark .prose strong,
.dark .prose b {
  color: #ffd27e;
}

pre {
  border-radius: 0.5rem;
}

.prose {
  max-width: none;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  scroll-margin-top: 5rem;
}

.prose iframe {
  margin: 0 auto;
  display: block;
  max-width: 100%;
}

/* ============================================================================
   BREVES STYLES
   ============================================================================ */
.breves-card img {
  margin-top: 6px;
}

.breves-card .pokeball-avatar {
  transition: transform 0.2s ease-out;
}

.breve-content {
  line-height: 1.7;
}

.breve-content img {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.breve-content img:hover {
  opacity: 0.8;
}

.breve-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.guide {text-align:center;}

@media (min-width: 640px) {
  .breve-images {
    grid-template-columns: repeat(3, 1fr);
  }
}

.breve-images img {
  border-radius: 0.75rem;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1.5deg);
  }
  75% {
    transform: rotate(1.5deg);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ============================================================================
   THEME TRANSITIONS - Circle Expand Effect
   ============================================================================ */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
  animation: circle-expand 0.6s ease-out;
}

@keyframes circle-expand {
  from {
    clip-path: circle(0 at var(--x) var(--y));
  }
  to {
    clip-path: circle(var(--end-radius) at var(--x) var(--y));
  }
}

@supports not (view-transition-name: root) {
  :root {
    transition: background-color 0.4s ease, color 0.4s ease;
  }
}

/* ============================================================================
   SCROLLBAR - Custom Styles
   ============================================================================ */
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  background: transparent !important;
}

html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, *::-webkit-scrollbar-track {
  background: transparent !important;
}

html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb {
  background-color: rgb(156 163 175 / 0.5) !important;
  border-radius: 9999px !important;
}

html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover {
  background-color: rgb(107 114 128 / 0.7) !important;
}

html::-webkit-scrollbar-button, body::-webkit-scrollbar-button, *::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner, *::-webkit-scrollbar-corner {
  background: transparent !important;
}

html, body, * {
  scrollbar-width: thin !important;
  scrollbar-color: rgb(156 163 175 / 0.5) transparent !important;
}

.dark::-webkit-scrollbar-thumb, .dark *::-webkit-scrollbar-thumb {
  background-color: rgb(55 65 81 / 0.5) !important;
}

.dark::-webkit-scrollbar-thumb:hover, .dark *::-webkit-scrollbar-thumb:hover {
  background-color: rgb(75 85 99 / 0.7) !important;
}

.dark, .dark * {
  scrollbar-color: rgb(55 65 81 / 0.5) transparent !important;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

.animate-shimmer {
  animation: shimmer 1.5s infinite;
}

.scrollbar-hide {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ============================================================================
   TABLE (LEGACY)
   ============================================================================ */
.tableau {
  margin: 1.5rem 0;
}

.tableau th,
.tableau td {
  padding: 0.75rem 1rem;
}

.tableau img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* ============================================================================
   SEARCH (Google Custom Search)
   ============================================================================ */
.gsc-modal-results {
  height: 100% !important;
  overflow: hidden !important;
}

.gsc-modal-results > div,
.gsc-modal-results .gsc-control-cse,
.gsc-modal-results .gsc-control-wrapper-cse {
  height: 100% !important;
}

.gsc-wrapper {
  position: relative;
  display: block;
  line-height: 1.4rem;
  max-height: 100%;
  overflow: auto;
}

.gsc-modal-results .gsc-results-wrapper-nooverlay,
.gsc-modal-results .gsc-results-wrapper-visible {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.gsc-modal-results .gsc-control-wrapper-cse {
  visibility: visible !important;
}

.gsc-modal-results .gsc-search-box {
  display: none !important;
}

.gsc-control-cse {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.gsc-results-wrapper-nooverlay,
.gsc-results-wrapper-visible,
.gsc-results {
  background-color: transparent !important;
  border: none !important;
}

.gsc-webResult.gsc-result {
  border: none !important;
  background-color: transparent !important;
  padding-bottom: 20px !important;
}

.gsc-above-wrapper-area {
  border-bottom: none !important;
}

.gs-web-image-box .gs-image,
.gs-promotion-image-box .gs-promotion-image {
  border: none !important;
  box-shadow: none !important;
}

.gsc-result-info {
  color: #5f6368 !important;
  font-family: inherit !important;
}

.gs-title a.gs-title,
.gs-title b {
  color: #1a0dab !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

.gs-title a.gs-title:hover {
  text-decoration: underline !important;
}

.gsc-url-top,
.gs-visibleUrl,
.gs-visibleUrl-short,
.gs-visibleUrl-long,
.gs-visibleUrl-breadcrumb {
  color: #006621 !important;
}

.gs-snippet {
  color: #4d5156 !important;
  line-height: 1.5 !important;
  background: none;
  border: none;
}

.gsc-cursor-page {
  color: #1a0dab !important;
  background-color: transparent !important;
}

.gsc-cursor-current-page {
  color: #1f2937 !important;
  font-weight: bold !important;
}

.gcsc-more-maybe-branding-root,
.gsc-above-wrapper-area {
  display: none !important;
}

.gs-no-results-result .gs-snippet,
.gs-error-result .gs-snippet {
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

/* Dark theme search */
.dark .gsc-result-info {
  color: #9aa0a6 !important;
}

.dark .gs-title a.gs-title,
.dark .gs-title b {
  color: #8ab4f8 !important;
}

.dark .gsc-url-top,
.dark .gs-visibleUrl,
.dark .gs-visibleUrl-short,
.dark .gs-visibleUrl-long,
.dark .gs-visibleUrl-breadcrumb {
  color: #81c995 !important;
}

.dark .gs-snippet {
  color: #e8eaed !important;
}

.dark .gsc-cursor-page {
  color: #8ab4f8 !important;
}

.dark .gsc-cursor-current-page {
  color: #ffffff !important;
}