body { font-family: Arial, sans-serif; background: linear-gradient(to bottom, #fff6d5, #ffffff); margin:0; padding:0; }
.layout { display:flex; height:90vh; overflow:hidden; }
.col { padding:20px; overflow-y:auto; }
.left { width:25%; background:#fff8e0; border-right:2px solid #ead7a4; }
.middle { width:50%; background:#ffffff; border-right:2px solid #ead7a4; position:relative; }
.right { width:25%; background:#fffdf4; }
h1,h2,h3 { margin-top:0; text-align:center; }
.element { display:block; border:1px solid #ccc; border-radius:8px; padding:8px 12px; margin:6px 4px 6px 0px; cursor:grab; transition:transform 0.1s; text-transform:capitalize; user-select:none; color:white; font-weight:bold; text-align:center;}
.element.over { transform: scale(1.05); }
.element:active { cursor: grabbing; }
.pokemon-card { width:240px; margin:20px auto; border-radius:16px; box-shadow:0 4px 10px rgba(0,0,0,0.2); overflow:hidden; text-transform:capitalize; cursor:pointer; position:relative; transition: transform 0.1s; }
.pokemon-card:hover { transform: scale(1.05); cursor: url('pokeball2.png'), auto; }
.pokemon-header { padding:8px 12px; color:white; font-weight:bold; text-align:center; }
.pokemon-body { background:#ffffff; padding:16px; text-align:center; position:relative; z-index:1; }
.pokemon-body img { width:96px; height:96px; image-rendering:pixelated; margin-bottom:8px; }
.pokemon-desc { width:260px; margin:10px auto; padding:10px; background:#fff8d9; border-radius:12px; box-shadow:0 3px 6px rgba(0,0,0,0.15); font-size:0.9em; color:#333; text-align:center; }
.particles { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:2; }
.particle { position:absolute; width:6px; height:6px; border-radius:50%; opacity:1; }
#message { font-weight:bold; margin-bottom:10px; text-align:center; }
.dex-entry { display:flex; align-items:center; margin:4px 0; text-transform:capitalize; }
.dex-entry img { width:32px; height:32px; margin-right:8px; image-rendering:pixelated; }
#release-all { display:block; margin:10px auto; padding:6px 12px; }
#progress { text-align:center; margin-bottom:10px; font-weight:bold; }
#gen-select { display:block; margin:10px auto 20px auto; padding:6px 10px; border-radius:6px; }
/* Footer styling */
#site-footer {
  clear: both;
  width: 97%;
  background: #f2f2f2;
  padding: 15px 20px;
  text-align: center;
  font-size: 0.85em;
  color: #555;
  border-top: 2px solid #e0e0e0;
  position: relative;
  margin-top: 0;
}

#site-footer .footer-content {
  max-width: 900px;
  margin: 0 auto;
}
/* Keep desktop layout normal */
#element-buttons {
  display: block;  /* stacked vertically on desktop */
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
  #element-buttons {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  #element-buttons::-webkit-scrollbar {
    height: 6px;
  }
  #element-buttons::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }

  #pokedex-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  #pokedex-list::-webkit-scrollbar {
    height: 6px;
  }
  #pokedex-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }

  .layout { flex-direction: column; height: auto; }
  .col { width: 100%; padding: 10px; border: none; overflow: visible; }
  .left { order: 1; background: #fff8e0; border-bottom: 2px solid #ead7a4; }
  .middle { order: 2; background: #ffffff; }
  .right { order: 3; background: #fffdf4; }
  .element { display: inline-block; float: none; margin: 6px 6px 6px 0; }
  .pokemon-card { width: 180px; margin: 15px auto; }
  .pokemon-desc { width: 90%; margin: 10px auto; }
  .dex-entry { display: inline-block; flex-direction: column; margin-right: 10px; text-align: center; }
  .dex-entry img { width: 48px; height: 48px; margin-bottom: 4px; }
  #site-footer { font-size: 0.85em; padding: 15px 10px; width: 96%; }
  #site-footer .footer-content { max-width: 100%; margin: 0 auto; }
}