/* Website-specific styles for centering and widescreen pad */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: black !important;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  border: none !important;
}

#site-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: black !important;
  margin: 0 !important;
  padding: 0 !important;
}

#popup-wrapper {
  width: 75vw;
  max-width: 1000px;
  min-height: 436px;
  margin: 15px;
  padding: 15px;
  background: linear-gradient(145deg, #ff7777, #cc2222);
  border: none !important;
  border-radius: 15px;
  font-family: 'Courier New', monospace;
  color: #fff;
  box-shadow: 
    15px 15px 20px rgba(0, 0, 0, 0.7),
    -15px -15px 20px rgba(255, 153, 153, 0.5);
  position: relative;
}

/* Original styles.css from MEMEDEX extension */
html, body, #seen-list, #meme-list, .tab-content, #donation-history {
  scrollbar-width: thin;
  scrollbar-color: #9acd32 #1a2a1a;
}

html::-webkit-scrollbar, 
body::-webkit-scrollbar, 
#seen-list::-webkit-scrollbar, 
#meme-list::-webkit-scrollbar,
.tab-content::-webkit-scrollbar,
#donation-history::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track, 
body::-webkit-scrollbar-track, 
#seen-list::-webkit-scrollbar-track, 
#meme-list::-webkit-scrollbar-track,
.tab-content::-webkit-scrollbar-track,
#donation-history::-webkit-scrollbar-track {
  background: #1a2a1a;
  border-radius: 5px;
  border: 1px solid #333;
}

html::-webkit-scrollbar-thumb, 
body::-webkit-scrollbar-thumb, 
#seen-list::-webkit-scrollbar-thumb, 
#meme-list::-webkit-scrollbar-thumb,
.tab-content::-webkit-scrollbar-thumb,
#donation-history::-webkit-scrollbar-thumb {
  background: #9acd32;
  border-radius: 5px;
  border: 1px solid #666;
  box-shadow: 
    2px 2px 0 #555,
    inset 1px 1px 0 #b0ff57,
    inset -1px -1px 0 #669900;
  transition: background 0.2s;
}

html::-webkit-scrollbar-thumb:hover, 
body::-webkit-scrollbar-thumb:hover, 
#seen-list::-webkit-scrollbar-thumb:hover, 
#meme-list::-webkit-scrollbar-thumb:hover,
.tab-content::-webkit-scrollbar-thumb:hover,
#donation-history::-webkit-scrollbar-thumb:hover {
  background: #b0ff57;
}

#pokedex {
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
}

h1 {
  text-align: center;
  font-size: 48px;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

p {
  text-align: center;
  font-size: 12px;
  margin: 5px 0;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.tab-btn, 
#items-content ul li button, 
#meme-list li button, 
#trading-content button, 
#store-content button, 
#hospital-content button, 
#stats-content button,
#donations-content button,
.flex-meme-btn,
.donation-btn,
#connect-wallet-btn,
#custom-donate-btn {
  background: #a0a0a0;
  color: #333;
  border: 3px solid #666;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 
    3px 3px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
  top: 0;
}

.tab-btn:hover, 
#items-content ul li button:hover, 
#meme-list li button:hover, 
#trading-content button:hover, 
#store-content button:hover, 
#hospital-content button:hover, 
#stats-content button:hover,
#donations-content button:hover,
.flex-meme-btn:hover,
.donation-btn:hover,
#connect-wallet-btn:hover,
#custom-donate-btn:hover {
  background: #b0b0b0;
  transform: translate(1px, 1px);
  box-shadow: 
    2px 2px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
}

.tab-btn.active {
  background: #808080;
  color: #fff;
  box-shadow: 
    1px 1px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
  transform: translate(2px, 2px);
}

.tab-btn:disabled,
.donation-btn:disabled,
#connect-wallet-btn:disabled,
#custom-donate-btn:disabled {
  background: #666;
  color: #999;
  cursor: not-allowed;
  box-shadow: 
    1px 1px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
  transform: translate(2px, 2px);
}

.tab-content {
  display: none;
  background: #1a2a1a;
  color: #9acd32;
  padding: 8px;
  border: 3px solid #333;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  text-shadow: 0 0 2px rgba(154, 205, 50, 0.5);
  background-image: linear-gradient(rgba(154, 205, 50, 0.05) 1px, transparent 1px);
  background-size: 100% 2px;
  width: calc(100% - 0px); /* Adjusted to be 16px wider on the right */
  overflow-y: auto;
}

.tab-content.active {
  display: block;
  height: 471px; /* Set to achieve inner height 455px, overriding max-height to force height */
}

#caught.tab-content, #seen.tab-content {
  height: auto; /* Override height for specific tabs to allow content-driven height */
  overflow-y: visible;
}

#team.tab-content {
  height: auto; /* Override height for specific tabs to allow content-driven height */
  overflow-y: visible;
}

#seen-list, #meme-list, #donation-history {
  list-style: none;
  padding: 0;
  max-height: 471px; /* Match .tab-content for consistency */
  overflow-y: auto;
}

#seen-list li, #meme-list li {
  display: flex;
  align-items: center;
  background: none;
  color: #9acd32;
  margin: 6px 0;
  padding: 10px;
  border-radius: 8px;
}

#meme-list .meme-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px;
  margin: 6px 0;
}

#meme-list .meme-info {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 10px;
}

#meme-list .meme-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 100px;
}

#seen-list img, #meme-list img {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 50%;
  border: 2px solid #9acd32;
  box-shadow: 0 0 4px #9acd32;
}

#team-content .team-slot {
  display: flex;
  align-items: center;
  margin: 3px 0;
  padding: 4px;
}

#team-content .team-slot-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #9acd32;
  box-shadow: 0 0 4px #9acd32;
  cursor: pointer;
  margin-right: 8px;
}

#team-content .team-slot-img:hover {
  border-color: #b0ff57;
  box-shadow: 0 0 6px #b0ff57;
}

#team-content .team-slot div {
  font-size: 12px;
  line-height: 1.2;
}

#team-selection-popout {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  max-height: 350px;
  padding: 15px;
  background: #1a2a1a;
  border: 3px solid #333;
  border-radius: 8px;
  color: #9acd32;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  text-shadow: 0 0 2px rgba(154, 205, 50, 0.5);
  z-index: 10001 !important;
  overflow-y: auto;
  box-shadow: 
    10px 10px 0 #222,
    -10px -10px 0 #ff9999,
    inset 5px 5px 0 #ff8888,
    inset -5px -5px 0 #aa1111;
}

#team-selection-popout h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #9acd32;
  text-shadow: 0 0 2px #9acd32;
}

#team-selection-popout .filter-section {
  margin-bottom: 8px;
}

#team-selection-popout .filter-section label {
  margin-right: 8px;
  font-size: 10px;
}

#team-selection-popout .filter-section select,
#team-selection-popout .filter-section input {
  background: #1a2a1a;
  color: #9acd32;
  border: 2px solid #9acd32;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  padding: 3px;
  margin-right: 8px;
  font-size: 10px;
}

#team-selection-popout .meme-option {
  display: flex;
  align-items: center;
  padding: 6px;
  margin: 3px 0;
  border-bottom: 1px solid #333;
  cursor: pointer;
}

#team-selection-popout .meme-option:hover {
  background: rgba(154, 205, 50, 0.1);
}

#team-selection-popout .meme-option img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #9acd32;
  box-shadow: 0 0 4px #9acd32;
  margin-right: 8px;
}

#team-selection-popout .meme-option span {
  flex: 1;
  font-size: 12px;
}

#team-selection-popout .close-btn {
  background: #a0a0a0;
  color: #333;
  border: 3px solid #666;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 11px;
  text-align: center;
  box-shadow: 
    3px 3px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
  top: 0;
  display: block;
  margin: 10px auto 0;
}

#team-selection-popout .close-btn:hover {
  background: #b0b0b0;
  transform: translate(1px, 1px);
  box-shadow: 
    2px 2px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
}

#stats-content h3, #items-content h3, #achievements-content h3, 
#trading-content h3, #store-content h3, #hospital-content h3, 
#help h3, #announcements h3, #donations-content h3 {
  font-size: 18px;
  margin: 10px 0;
  color: #9acd32;
  text-shadow: 0 0 2px #9acd32;
}

#stats-content p, #items-content p, #achievements-content p, 
#trading-content p, #store-content p, #hospital-content p, 
#help p, #announcements p, #donations-content p {
  font-size: 14px;
  margin: 6px 0;
  color: #9acd32;
}

#items-content ul li, #achievements-content ul li, 
#trading-content ul li, #store-content ul li, 
#hospital-content ul li, #announcements ul li,
#donations-content ul li {
  background: none;
  color: #9acd32;
  padding: 0;
  margin: 6px 0;
  display: flex;
  align-items: center;
}

#items-content select, #hospital-content select, #trading-content select {
  background: #1a2a1a;
  color: #9acd32;
  border: 2px solid #9acd32;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  padding: 6px;
  width: 80%;
  box-shadow: 0 0 4px #9acd32;
}

.battle-link, .social-link {
  color: #9acd32;
  text-decoration: none;
  font-weight: bold;
}

.battle-link:hover, .social-link:hover {
  text-decoration: underline;
  color: #b0ff57;
}

.tiny-potion-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  margin-left: 5px;
  padding: 0;
  vertical-align: middle;
  color: #9acd32;
}

.tiny-potion-btn:hover {
  transform: scale(1.2);
  color: #b0ff57;
}

.game-btn {
  background: #a0a0a0;
  color: #333;
  border: 3px solid #666;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 
    3px 3px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
  top: 0;
}

#meme-list .game-btn {
  padding: 4px 8px;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
}

.game-btn:hover {
  background: #b0b0b0;
  transform: translate(1px, 1px);
  box-shadow: 
    2px 2px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
}

.game-btn:active {
  background: #808080;
  color: #fff;
  box-shadow: 
    1px 1px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
  transform: translate(2px, 2px);
}

#meme-list .meme-item {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  margin: 4px 0;
  border-bottom: 1px solid #333;
}

#meme-list .meme-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

#meme-list .meme-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

#meme-list .meme-left img {
  width: 24px;
  height: 24px;
  margin-right: 0;
  border-radius: 50%;
  border: 2px solid #9acd32;
  box-shadow: 0 0 4px #9acd32;
}

#meme-list .meme-name-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

#meme-list .meme-name {
  font-weight: bold;
  font-size: 12px;
  color: #9acd32;
  position: relative;
  cursor: pointer;
}

#meme-list .meme-name[title]:hover:after {
  content: attr(title);
  position: absolute;
  top: -20px;
  left: 0;
  background: #1a2a1a;
  color: #9acd32;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid #9acd32;
  font-size: 10px;
  white-space: nowrap;
  z-index: 10;
}

#meme-list .badge.shiny-badge {
  padding: 1px 3px;
  border-radius: 6px;
  font-size: 8px;
  background-color: #ffd700;
  color: #000;
}

#meme-list .meme-right {
  flex: 1;
}

#meme-list .meme-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
  color: #9acd32;
}

#meme-list .meme-details div {
  line-height: 1.1;
}

#meme-list .meme-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  justify-content: flex-end;
}

#meme-list .game-btn {
  padding: 3px 6px;
  font-size: 9px;
  width: auto;
  min-width: 70px;
}

#wallet-status {
  font-size: 12px;
  margin: 5px 0;
  color: #9acd32;
  text-shadow: 0 0 2px rgba(154, 205, 50, 0.5);
}

#custom-donation {
  background: #1a2a1a;
  color: #9acd32;
  border: 2px solid #9acd32;
  border-radius: 8px;
  padding: 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  width: 120px;
  box-shadow: 0 0 4px #9acd32;
}

#donation-history {
  max-height: 100px;
  overflow-y: auto;
  background: #1a2a1a;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 5px;
  font-size: 12px;
  color: #9acd32;
}

#donation-history li {
  margin: 5px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

#wallet-type {
  background: #1a2a1a;
  color: #9acd32;
  border: 2px solid #9acd32;
  border-radius: 8px;
  padding: 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  box-shadow: 0 0 4px #9acd32;
  cursor: pointer;
}

#wallet-type:hover {
  border-color: #b0ff57;
  box-shadow: 0 0 6px #b0ff57;
}

#donations-content label {
  color: #9acd32;
  font-size: 12px;
  text-shadow: 0 0 2px rgba(154, 205, 50, 0.5);
}

#battle-arena {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  background: #1a2a1a;
  border: 5px solid #333;
  border-radius: 15px;
  padding: 20px;
  color: #9acd32;
  z-index: 10000 !important;
  font-family: 'Courier New', monospace;
  text-align: center;
  overflow: auto;
  transition: all 0.3s ease;
  box-shadow: 
    10px 10px 0 #222,
    -10px -10px 0 #ff9999,
    inset 5px 5px 0 #ff8888,
    inset -5px -5px 0 #aa1111;
  background-image: linear-gradient(rgba(154, 205, 50, 0.05) 1px, transparent 1px);
  background-size: 100% 2px;
}

#battle-arena .battle-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 20px;
}

#battle-arena .meme-sprite-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 10px;
}

#battle-arena .meme-sprite {
  width: 80px;
  height: 80px;
  border: 2px solid #9acd32;
  border-radius: 10px;
  box-shadow: 0 0 6px #9acd32;
  transition: transform 0.2s;
}

#battle-arena .meme-sprite.attacking {
  animation: attackShake 0.3s ease-in-out;
}

#battle-arena .meme-sprite.hit {
  animation: hitShake 0.3s ease-in-out;
  filter: brightness(0.7);
}

#battle-arena .hp-bar {
  width: 150px;
  height: 10px;
  background: #333;
  border: 1px solid #9acd32;
  border-radius: 5px;
  margin: 5px 0;
  overflow: hidden;
}

#battle-arena .hp-bar-fill {
  height: 100%;
  background: #9acd32;
  transition: width 0.5s ease;
}

#battle-arena .attack-feedback {
  font-size: 16px;
  color: #b0ff57;
  text-shadow: 0 0 4px #b0ff57;
  margin: 10px 0;
  opacity: 0;
  animation: fadeInOut 1.5s ease;
}

#battle-arena .battle-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
}

#battle-arena .battle-btn,
#battle-arena .game-btn {
  background: #a0a0a0 !important;
  color: #333 !important;
  border: 3px solid #666 !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Courier New', monospace !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 
    3px 3px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555 !important;
  transition: transform 0.1s, box-shadow 0.1s, background 0.2s, border-color 0.2s !important;
  position: relative !important;
  top: 0 !important;
  cursor: pointer !important;
}

#battle-arena .battle-btn:hover,
#battle-arena .game-btn:hover {
  background: #b0b0b0 !important;
  border-color: #9acd32 !important;
  transform: scale(1.05) translate(1px, 1px) !important;
  box-shadow: 
    2px 2px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555 !important;
}

#battle-arena .battle-btn:active,
#battle-arena .game-btn:active,
#battle-arena .battle-btn.attacking,
#battle-arena .game-btn.attacking {
  background: #808080 !important;
  color: #fff !important;
  border-color: #b0ff57 !important;
  box-shadow: 
    1px 1px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555,
    0 0 10px #b0ff57 !important;
  transform: translate(2px, 2px) !important;
  animation: buttonPulse 0.3s ease;
}

#battle-arena .battle-btn:disabled,
#battle-arena .game-btn:disabled {
  background: #666 !important;
  color: #999 !important;
  cursor: not-allowed !important;
  box-shadow: 
    1px 1px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555 !important;
  transform: translate(2px, 2px) !important;
}

#battle-arena #expand-btn.game-btn.battle-btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: 5px !important;
}

@keyframes attackShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@keyframes hitShake {
  0% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
  75% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes buttonPulse {
  0% { transform: scale(1) translate(2px, 2px); }
  50% { transform: scale(1.1) translate(2px, 2px); }
  100% { transform: scale(1) translate(2px, 2px); }
}

#battle-arena.attack-flash {
  animation: screenFlash 0.2s ease;
}

@keyframes screenFlash {
  0% { background: #1a2a1a; }
  50% { background: #b0ff57; }
  100% { background: #1a2a1a; }
}

#credits-counter {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a2a1a;
  padding: 6px 12px;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#credits-counter:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#leaderboard-button {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a2a1a;
  padding: 6px 12px;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
  height: 46px; /* Reduced by 2px from 48px */
}

#leaderboard-button:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#leaderboard-button span {
  pointer-events: none;
}

.coin-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  pointer-events: none;
}

#credits-value {
  font-size: 20px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
  pointer-events: none;
}

#character-selection {
  text-align: center;
}

#character-selection h2 {
  font-size: 20px;
  margin: 10px 0;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

#character-selection p {
  font-size: 14px;
  margin-bottom: 20px;
}

#character-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.character-option {
  text-align: center;
  cursor: pointer;
  padding: 10px;
  background: #a0a0a0;
  border: 3px solid #666;
  border-radius: 8px;
  box-shadow: 
    3px 3px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
  transition: transform 0.1s, box-shadow 0.1s;
  width: 120px;
}

.character-option:hover {
  background: #b0b0b0;
  transform: translate(1px, 1px);
  box-shadow: 
    2px 2px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
}

.character-option img {
  width: 80px;
  height: 80px;
}

.character-option p {
  margin: 5px 0;
  font-size: 14px;
  color: #333;
}

#player-name {
  background: #1a2a1a;
  color: #9acd32;
  border: 2px solid #9acd32;
  border-radius: 8px;
  padding: 6px;
  font-family: 'Courier New', monospace;
  margin-right: 10px;
  font-size: 12px;
}

#confirm-character {
  background: #a0a0a0;
  color: #333;
  border: 3px solid #666;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 11px;
  box-shadow: 
    3px 3px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
  transition: transform 0.1s, box-shadow 0.1s;
}

#confirm-character:hover {
  background: #b0b0b0;
  transform: translate(1px, 1px);
  box-shadow: 
    2px 2px 0 #666,
    inset 2px 2px 0 #ccc,
    inset -2px -2px 0 #555;
}

/* Roadmap Styles */
.roadmap-container {
  position: relative;
  width: 75%; /* 75% of IIGS width */
  height: 75%; /* 75% of IIGS height */
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  background: #c0c7c8; /* Pokémon Gameboy background color */
  border: 4px solid #000;
  border-radius: 8px;
  overflow: hidden;
  z-index: 1; /* Ensure container is above other elements */
}

#roadmap-canvas {
  width: 100%;
  height: 100%;
  display: block; /* Ensure canvas is visible */
  background: #000000; /* Fallback background to distinguish from container */
  image-rendering: pixelated; /* Ensures 8-bit pixel art style */
  z-index: 2; /* Ensure canvas is above container background */
}

.milestone-textbox {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  background: #fff;
  border: 4px solid #000;
  border-radius: 8px;
  padding: 8px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #000;
  display: none;
  z-index: 10; /* Ensure textbox is above canvas */
}

.milestone-textbox::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: 10px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #000;
}

/* CA Screen Styles */
#ca-screen {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 75vw;
  max-width: 1000px;
  height: 64px;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

#ca-screen:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#ca-screen:active {
  box-shadow: 
    2px 2px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
}

#ca-text, .ca-text {
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
  white-space: nowrap;
  position: absolute;
  right: 0;
  animation: scrollText 20s linear infinite;
}

@keyframes scrollText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(calc(-100% - 100vw));
  }
}

/* Player Name Button */
#player-name-button {
  position: absolute;
  top: 32px;
  left: 32px;
  width: 384px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
}

#player-name-button:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#player-name-button:active {
  transform: translate(2px, 2px);
  box-shadow: 
    2px 2px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
}

#player-name-button span {
  pointer-events: none;
}

/* Duplicate GTME Button */
#gtme-button {
  position: fixed;
  bottom: 40px;
  left: 32px;
  width: 384px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
}

#gtme-button:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#gtme-button:active {
  transform: translate(2px, 2px);
  box-shadow: 
    2px 2px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
}

#gtme-button span {
  pointer-events: none;
}

/* Fixed Screen Styles */
#fixed-screen {
  position: absolute;
  top: 142px;
  left: 32px;
  width: 384px;
  height: 624px; /* 592px + 32px additional height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  transition: border-color 0.2s, box-shadow 0.2s;
  padding: 16px;
  gap: 16px;
}

#fixed-screen .inner-screen {
  position: relative;
  width: 100%;
  height: calc(50% - 8px);
  background: #1a2a1a;
  border: 2px solid #9acd32;
  border-radius: 8px;
  box-shadow: 
    2px 2px 0 #333,
    inset 1px 1px 0 #b0ff57,
    inset -1px -1px 0 #669900;
}

#fixed-screen:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#fixed-screen span {
  pointer-events: none;
}

#fixed-screen-2 {
  position: absolute;
  top: 142px;
  right: 32px;
  width: 384px;
  height: 624px; /* 592px + 32px additional height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  transition: border-color 0.2s, box-shadow 0.2s;
  padding: 16px;
  gap: 16px;
}

#fixed-screen-2 .inner-screen {
  position: relative;
  width: 100%;
  height: calc(50% - 8px);
  background: #1a2a1a;
  border: 2px solid #9acd32;
  border-radius: 8px;
  box-shadow: 
    2px 2px 0 #333,
    inset 1px 1px 0 #b0ff57,
    inset -1px -1px 0 #669900;
}

#fixed-screen-2:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#trading-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

.trading-data-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trading-header {
  text-align: center;
}

.trading-header h3 {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
  margin: 0;
}

.trading-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -12px; /* Move stats up by 12px */
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: rgba(26, 42, 26, 0.5);
  border: 2px solid #9acd32;
  border-radius: 8px;
  margin-top: -12px; /* Move each stat item up by 12px */
}

.stat-label {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: #9acd32;
}

.stat-value {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: #b0ff57;
  text-shadow: 0 0 4px #b0ff57;
}

.chart-container {
  flex: 1;
  width: 100%;
  min-height: 200px;
  background: rgba(26, 42, 26, 0.3);
  border: 2px solid #9acd32;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
}

.trading-data-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.trading-header {
  text-align: center;
}

.trading-header h3 {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
  margin: 0;
}

.trading-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: rgba(26, 42, 26, 0.5);
  border: 2px solid #9acd32;
  border-radius: 8px;
}

.stat-label {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #9acd32;
}

.stat-value {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #b0ff57;
  text-shadow: 0 0 4px #b0ff57;
}

#fixed-screen .inner-screen video,
#fixed-screen-2 .inner-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.screen-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #9acd32;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 2px 2px 0 #000;
  z-index: 10;
  pointer-events: none;
}

.is-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 32px;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
  font-weight: bold;
  z-index: 10;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.is-btn:hover {
  border-color: #b0ff57;
  box-shadow: 4px 4px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900, 0 0 12px #b0ff57;
}
.is-btn:active {
  transform: translate(-50%, -50%) scale(0.98);
  box-shadow: 2px 2px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900;
}

.policy-box {
  width: 100%;
  height: 170px;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.policy-title {
  color: #9acd32;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  margin: 8px 0 0 0;
  text-shadow: 0 0 4px #9acd32;
  font-weight: bold;
  transition: all 0.3s ease;
}

.policy-content {
  color: #9acd32;
  font-family: 'Courier New', monospace;
  font-size: 8.5px;
  margin: 8px 8px 0 8px;
  text-align: justify;
  line-height: 1.18;
  word-break: break-word;
  flex: 1 1 auto;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Specific styles for Privacy Policy box */
.policy-box:nth-child(1),
.policy-box:nth-child(2),
.policy-box:nth-child(3),
.policy-box:nth-child(4) {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.policy-box:nth-child(1) {
  transform-origin: top left;
}

.policy-box:nth-child(2) {
  transform-origin: top right;
}

.policy-box:nth-child(3) {
  transform-origin: bottom left;
}

.policy-box:nth-child(4) {
  transform-origin: bottom right;
}

.policy-box:nth-child(1).expanded,
.policy-box:nth-child(2).expanded,
.policy-box:nth-child(3).expanded,
.policy-box:nth-child(4).expanded {
  transform: scale(1.5);
  z-index: 10;
  box-shadow: 0 0 24px #b0ff57, 8px 8px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900;
  border-color: #b0ff57;
}

.policy-box:nth-child(1).expanded .policy-title,
.policy-box:nth-child(2).expanded .policy-title,
.policy-box:nth-child(3).expanded .policy-title,
.policy-box:nth-child(4).expanded .policy-title {
  font-size: 30px;
}

.policy-box:nth-child(1).expanded .policy-content,
.policy-box:nth-child(2).expanded .policy-content,
.policy-box:nth-child(3).expanded .policy-content,
.policy-box:nth-child(4).expanded .policy-content {
  font-size: 8px;
}

/* Apply font size increase only to About page */
#about .policy-content {
  font-size: 9.5px;
}
#about .policy-box.expanded .policy-content {
  font-size: 9px;
}

/* Container styles to handle the hover effect */
#policies .tab-content {
  position: relative;
  overflow: visible;
}

#policies .tab-content > div {
  position: relative;
  overflow: visible;
}

#policies .tab-content > div > div {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 12px 0 12px;
  min-height: 400px;
}

.policy-images-overlay {
  display: flex;
  justify-content: center;
  gap: 32px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  margin-top: 0px;
}

.policy-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #9acd32;
  box-shadow: 0 0 4px #9acd32;
}

.policy-img-left {
  /* No transform, keep centered */
}

.policy-img-center {
  z-index: 2;
}

.policy-img-right {
  /* No transform, keep centered */
}

.icon-btn {
  width: 40px;
  height: 40px;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 50%;
  box-shadow: 4px 4px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: 'Courier New', monospace;
  color: #9acd32;
  z-index: 2;
  outline: none;
}
.icon-btn:hover {
  border-color: #b0ff57;
  box-shadow: 4px 4px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900, 0 0 12px #b0ff57;
}
.icon-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900;
}
.icon-btn img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

.policy-box:hover {
  border-color: #b0ff57;
  box-shadow: 4px 4px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900, 0 0 12px #b0ff57;
}

#sirrious-branding {
  position: fixed;
  left: 32px;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3000;
  font-family: 'Courier New', monospace !important;
  font-size: 10px !important;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
}
#sirrious-branding img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #9acd32;
  box-shadow: 0 0 4px #9acd32;
}
#sirrious-branding a {
  font-family: 'Courier New', monospace !important;
  font-size: 10px !important;
  color: #9acd32 !important;
  text-shadow: 0 0 4px #9acd32 !important;
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}
#sirrious-branding a:hover {
  color: #b0ff57 !important;
  text-shadow: 0 0 12px #b0ff57, 0 0 24px #b0ff57, 0 0 32px #b0ff57 !important;
}

/* Tokemap Styles */
.tokemap-container {
  position: absolute;
  top: 64px;
  left: 128px;
  width: 704px;
  height: 320px;
  background: #c0c7c8;
  border: 4px solid #000;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
}

#tokemap-canvas {
  width: 704px;
  height: 320px;
  display: block;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 16px;
  z-index: 1;
}

#water-gif-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Button 1 Styles */
#button-1 {
  position: fixed;
  bottom: 40px;
  left: calc(50% - 37.5vw);
  width: 192px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
}

#button-1:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#button-1:active {
  transform: translate(2px, 2px);
  box-shadow: 
    2px 2px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
}

#button-1 span {
  pointer-events: none;
}

/* Button 2 Styles */
#button-2 {
  position: fixed;
  bottom: 40px;
  left: calc(50% - 12.5vw - 64px);
  width: 192px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
}

#button-2:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#button-2:active {
  transform: translate(2px, 2px);
  box-shadow: 
    2px 2px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
}

#button-2 span {
  pointer-events: none;
}

/* Button 3 Styles */
#button-3 {
  position: fixed;
  bottom: 40px;
  left: calc(50% + 12.5vw - 192px + 64px);
  width: 192px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
}

#button-3:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#button-3:active {
  transform: translate(2px, 2px);
  box-shadow: 
    2px 2px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
}

#button-3 span {
  pointer-events: none;
}

/* Button 4 Styles */
#button-4 {
  position: fixed;
  bottom: 40px;
  left: calc(50% + 37.5vw - 192px);
  width: 192px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
}

#button-4:hover {
  border-color: #b0ff57;
  box-shadow: 
    4px 4px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900,
    0 0 12px #b0ff57;
}

#button-4:active {
  transform: translate(2px, 2px);
  box-shadow: 
    2px 2px 0 #333,
    inset 2px 2px 0 #b0ff57,
    inset -2px -2px 0 #669900;
}

#button-4 span {
  pointer-events: none;
}

/* Button 5 Styles */
#button-5 {
  position: fixed;
  bottom: 8px;
  right: 32px;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 3px solid #bada55;
  border-radius: 50%;
  box-shadow: 0 0 8px #bada55, 0 2px 8px #000a;
  z-index: 2000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  padding: 0;
}
#button-5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
#button-5:hover {
  border-color: #bada55;
  box-shadow: 0 0 16px #bada55, 0 2px 8px #000a;
}
#button-5:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 8px #bada55, 0 2px 8px #000a;
}

/* Media query to handle max-width of the pad */
@media screen and (min-width: 1334px) {
  #button-1 {
    left: calc(50% - 500px); /* Half of the max-width (1000px) of the pad */
  }
  #button-2 {
    left: calc(50% - 166.67px - 64px); /* One-third of the way from Button 1 to Button 4, minus 64px */
  }
  #button-3 {
    left: calc(50% + 166.67px - 192px + 64px); /* Two-thirds of the way from Button 1 to Button 4, plus 64px */
  }
  #button-4 {
    left: calc(50% + 500px - 192px); /* Right edge of pad (50% + 500px) minus button width */
  }
}

/* Enhanced laptop display scaling */
@media screen and (max-width: 1366px) {
  #site-wrapper {
    transform: scale(0.8);
    transform-origin: top center;
    width: 1280px;
    margin: 0 auto;
    overflow: auto;
  }
  html, body {
    overflow: auto !important;
  }
}

/* 15.5" Laptop display scaling */
@media screen and (min-width: 1367px) and (max-width: 1600px) {
  #site-wrapper {
    transform: scale(0.75);
    transform-origin: top center;
    width: 1280px;
    margin: 0 auto;
    overflow: auto;
  }
  html, body {
    overflow: auto !important;
  }

  /* Position main Memedex pad 32px below CA Screen button */
  #popup-wrapper {
    position: absolute !important;
    top: 128px !important; /* 32px (CA Screen top) + 64px (CA Screen height) + 32px gap */
    left: calc(50% - 96px) !important; /* Shifted 96px left from center */
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  /* Move main navigation buttons 64px to the right and adjust FAQ/Feedback closer to center for 15.5" laptops */
  #button-1 {
    left: calc(50% - 37.5vw + 64px - 12px + 32px) !important; /* FAQ: 12px closer to center + 32px right */
  }
  #button-2 {
    left: calc(50% - 12.5vw - 64px + 64px) !important; /* Meme Types: unchanged */
  }
  #button-3 {
    left: calc(50% + 12.5vw - 192px + 64px + 64px) !important; /* Contact Us: unchanged */
  }
  #button-4 {
    left: calc(50% + 37.5vw - 192px + 64px - 12px) !important; /* Feedback: 12px closer to center */
  }

  /* Position side panels 32px from memedex pad edges and move out 72px from center for 15.5" laptops */
  #fixed-screen {
    left: calc(50% - 500px - 384px + 32px - 32px - 32px - 8px - 32px - 32px - 32px) !important; /* 32px from pad edge + 72px out from center + 96px left shift */
  }
  #fixed-screen-2 {
    right: calc(50% - 500px - 384px + 32px - 32px - 32px - 8px + 32px + 32px + 32px) !important; /* 32px from pad edge + 72px out from center + 96px left shift */
  }

  /* Move CA Screen and GTLI buttons 96px left for 15.5" laptops */
  #ca-screen {
    left: calc(50% - 96px) !important; /* Moved 96px left from center */
  }
  .gtli-button {
    right: 128px !important; /* Moved 96px left from right edge (32px + 96px) */
  }
}

@media screen and (max-width: 900px) {
  #site-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  #popup-wrapper, #fixed-screen, #fixed-screen-2 {
    width: 98vw;
    max-width: 100vw;
    margin: 4px auto;
    padding: 4px;
  }
  .tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .tab-btn {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
  .header-bar, .announcement-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  h1 {
    font-size: 32px;
  }
}

@media screen and (max-width: 600px) {
  #popup-wrapper, #fixed-screen, #fixed-screen-2 {
    width: 100vw;
    max-width: 100vw;
    margin: 2px 0;
    padding: 2px;
    border-radius: 0;
  }
  .tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .tab-btn {
    width: 100%;
    font-size: 14px;
    min-width: 0;
  }
  .header-bar, .announcement-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .gtli-button, #button-1, #button-2, #button-3, #button-4 {
    width: 98vw;
    max-width: 100vw;
    font-size: 16px;
    height: 48px;
  }
  h1 {
    font-size: 22px;
  }
}

/* Keep existing PC parameters */
@media screen and (min-width: 1367px) {
  #site-wrapper, #popup-wrapper, #fixed-screen, #fixed-screen-2, .gtli-button, #button-1, #button-2, #button-3, #button-4, #sirrious-branding {
    transform: none;
  }
}

/* GTLI Button Styles */
.gtli-button {
  position: fixed;
  width: 384px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a2a1a;
  border: 4px solid #9acd32;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900;
  z-index: 2000;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #9acd32;
  text-shadow: 0 0 4px #9acd32;
  top: 32px; /* Match CA screen display button */
  right: 32px;
}

.gtli-button:hover {
  border-color: #b0ff57;
  box-shadow: 4px 4px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900, 0 0 12px #b0ff57;
}

.gtli-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900;
}

.gtli-button span {
  pointer-events: none;
}

#main-scale-wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.scale-to-fit {
  transform-origin: top center;
  transition: transform 0.2s;
}