body {
  background: #111;
  color: #fff;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Root scaling */
:root {
  --viewport-scale: min(
    1,
    min(
      calc((100vw - 32px) / 1920),
      calc((100vh - 32px) / 1080)
    )
  );
}

/* Layout wrapper */
.memedex-layout {
  margin-top: 116px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 1920px;
  box-sizing: border-box;
  padding: 0 32px;
  position: relative;
  transform-origin: top center;
  transform: scale(var(--viewport-scale));
}

#game-container {
  background: #111e10;
  border-radius: 14px;
  box-shadow: 0 0 0 6px #bada55, 0 2px 24px #000a;
  padding: 32px 24px 24px 24px;
  display: inline-block;
  margin-top: 0;
}

#gameCanvas {
  background: #0000b2;
  border: 8px solid #ff5c5c;
  display: block;
  margin: 0 auto;
}

#score, #level {
  display: inline-block;
  font-size: 1.2em;
  color: #fff;
  font-family: inherit;
  margin: 4px 8px 0 0;
  vertical-align: middle;
}

#restartBtn, #flexScoreBtn {
  margin-top: 15px;
  padding: 12px 32px;
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(180deg, #ff5c5c 0%, #c0392b 100%);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px #a93226, 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.15s ease;
}

#restartBtn:hover, #flexScoreBtn:hover {
  background: linear-gradient(180deg, #ff7f7f 0%, #e74c3c 100%);
  box-shadow: 0 2px #a93226, 0 4px 16px rgba(0,0,0,0.25);
  transform: translateY(2px) scale(1.04);
}

#arrowButtonDeck {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  padding: 10px;
  user-select: none;
  z-index: 1000;
  display: none !important; /* HIDE NAVIGATION BUTTONS ON ALL SCREENS */
}

.arrow-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.arrow-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
}

.arrow-btn {
  width: 50px;
  height: 50px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(180deg, #ff5c5c 0%, #c0392b 100%);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px #a93226, 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-btn:hover {
  background: linear-gradient(180deg, #ff7f7f 0%, #e74c3c 100%);
  box-shadow: 0 2px #a93226, 0 4px 16px rgba(0,0,0,0.25);
  transform: translateY(2px) scale(1.04);
}

.memedex-pad-wrapper {
  max-width: 100vw;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0 12px;
}

.memedex-pad {
  max-width: 900px;
  min-width: 600px;
  width: 900px;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg, #ff5c5c 0%, #e74c3c 100%);
  border-radius: 24px 24px 18px 18px;
  box-shadow: 8px 12px 0 #222, 0 0 0 6px #c0392b inset;
  padding: 24px 16px 16px 16px;
  display: inline-block;
  margin: 136px 20px 40px 20px;
  position: relative;
  transform: scale(1);
  transition: transform 0.1s linear;
}

.memedex-pad h1 {
  color: #fff;
  font-family: 'Press Start 2P', 'Consolas', monospace, Arial, sans-serif;
  font-size: 2.2em;
  text-align: center;
  margin-top: 0;
  margin-bottom: 18px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #c0392b, 0 2px 8px #fff2;
}

.winner-message {
  display: none;
  position: absolute;
  bottom: 60px;
  font-size: 2em;
  font-weight: bold;
  color: #ffe600;
  opacity: 0;
  pointer-events: none;
  animation: winner-flash 0.6s linear infinite;
  z-index: 2;
}
.winner-message.left {
  left: 25%;
  transform: translateX(-100%) translateX(96px);
}
.winner-message.right {
  right: 25%;
  transform: translateX(100%) translateX(-96px);
}
@keyframes winner-flash {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 0); }
  20%, 40%, 60%, 80% { transform: translate(10px, 0); }
  100% { transform: translate(0, 0); }
}
.memedex-pad.shake {
  animation: shake 0.5s linear 6 !important;
  transform: none !important;
}

#gameCanvas, #rainCanvas, #winCanvas {
  width: 800px !important;
  height: 400px !important;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

.inner-screen {
  width: 90%;
  height: 44%;
  background: #bada55;
  border: 4px solid #bada55;
  border-radius: 12px;
  margin: 12px 0;
  box-shadow: 0 2px 12px #000a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fixed-screen {
  position: absolute;
  top: 26px;
  width: 384px;
  min-width: 384px;
  height: 596px;
  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 {
  left: 32px;
}

#fixed-screen-2 {
  right: 32px;
}

.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;
}

.inner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.sirrious-footer {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1000;
  display: flex;
  align-items: center;
  background: none;
  font-size: calc(1.05em - 6pt) !important;
}
.sirrious-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #bada55;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 1.05em;
  font-weight: bold;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.sirrious-link:hover .sirrious-highlight {
  color: #eaff7b;
  text-shadow: 0 0 8px #bada55;
}
.sirrious-logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #111e10;
  border: 3px solid #bada55;
  box-shadow: 0 0 8px #bada55, 0 2px 8px #000a;
  margin-right: 10px;
  object-fit: cover;
}
.sirrious-highlight {
  color: #bada55;
  font-weight: bold;
}

.footer-buttons {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  z-index: 2000;
  margin: 0;
}
#button-0, #button-1, #button-2, #button-3 {
  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;
  margin: 0;
}
#button-0:hover, #button-1:hover, #button-2:hover, #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-0:active, #button-1:active, #button-2:active, #button-3:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #333, inset 2px 2px 0 #b0ff57, inset -2px -2px 0 #669900;
}
#button-0 span, #button-1 span, #button-2 span, #button-3 span {
  pointer-events: none;
}

/* Add at the top of the file */
.top-buttons-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.top-buttons-container > a {
  flex: 1;
  margin: 0 10px;
}

@media screen and (max-width: 1366px) {
  :root {
    --viewport-scale: 0.64;
  }

  body {
    overflow-y: hidden;
    height: 100vh;
  }

  /* Target the specific buttons by their IDs and classes */
  #player-name-button,
  #ca-screen,
  .gtli-button {
    transform: scale(0.64) !important;
    transform-origin: top center !important;
  }

  /* Position left button above left panel */
  #player-name-button {
    left: -32px !important;
  }

  #ca-screen {
    transform: translateX(-50%) scale(0.64) !important;
  }

  /* Position right button above right panel */
  .gtli-button {
    right: -32px !important;
  }

  /* Specific button targeting */
  a.top-button[href*="Download MEMEDEX Extension"],
  a.top-button[href*="pump.fun/coin"],
  a.top-button[href*="Synchronize MEMEDEX"] {
    zoom: 0.64;
    -moz-transform: scale(0.64);
    -moz-transform-origin: top center;
    -webkit-transform: scale(0.64);
    -webkit-transform-origin: top center;
    transform: scale(0.64) !important;
    transform-origin: top center !important;
  }

  /* Ensure proper spacing after scaling */
  .top-buttons-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    margin-top: 20px;
  }

  /* Top navigation buttons container */
  .top-buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: calc(100% / 0.64);
    transform: scale(0.64);
    transform-origin: top center;
    margin-top: 20px;
  }

  /* Top navigation buttons with more specific targeting */
  body a[href*="Download MEMEDEX Extension"],
  body a[href*="pump.fun/coin"],
  body a[href*="Synchronize MEMEDEX"] {
    transform: scale(0.8) !important;
    transform-origin: top center !important;
    display: inline-block !important;
    position: relative !important;
    margin: 0 10px !important;
    max-width: 33% !important;
  }

  /* Container for top buttons */
  body > div:first-of-type {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px !important;
  }

  /* Layout container adjustments */
  .memedex-layout {
    margin-top: 80px;
    transform-origin: top center;
    transform: scale(var(--viewport-scale));
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    position: relative;
  }

  /* Fixed screens positioning */
  .fixed-screen {
    width: 384px !important;
    min-width: 384px !important;
    height: 596px !important;
    top: 0 !important;
    padding: 16px !important;
    gap: 16px !important;
    margin: 0 !important;
    position: absolute !important;
  }

  #fixed-screen {
    left: 32px !important;
  }

  #fixed-screen-2 {
    right: 32px !important;
  }

  /* Center game container */
  .memedex-pad {
    transform: scale(1.05) !important;
    transform-origin: center center !important;
    position: relative;
    margin: 0 auto;
  }

  /* Footer buttons positioning */
  .footer-buttons {
    position: fixed;
    bottom: 35px;
    margin-top: 0;
    transform-origin: center bottom;
    width: 100%;
    left: 0;
    transform: scale(var(--viewport-scale));
    display: flex;
    justify-content: center;
    gap: 32px;
  }

  /* Direct button targeting */
  .memedex-layout > a {
    font-size: 14px !important;
    padding: 8px 16px !important;
    transform: scale(0.8) !important;
    transform-origin: center center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .memedex-layout > a:first-child {
    margin-right: auto !important;
  }

  .memedex-layout > a:last-child {
    margin-left: auto !important;
  }

  .memedex-layout > a:nth-child(2) {
    margin: 0 20px !important;
  }

  /* Hide copied notification by default */
  #copied-notification {
    visibility: hidden;
    opacity: 0;
    position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.64) !important;
    z-index: 3000 !important;
  }

  /* Show notification only when CA screen is clicked */
  #ca-screen:active ~ #copied-notification {
    visibility: visible;
    opacity: 1;
  }

  /* Position notification properly */
  #copied-notification {
    position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.64) !important;
    z-index: 3000 !important;
  }
}
@media screen and (max-width: 1200px),
       screen and (max-width: 1024px),
       screen and (min-width: 1334px),
       screen and (min-width: 1367px) {
  .fixed-screen {
    width: 384px !important;
    min-width: 384px !important;
    height: 596px !important;
    top: 26px !important;
    padding: 16px !important;
    gap: 16px !important;
    margin: 0 !important;
    transform: none !important;
  }
}
@media screen and (max-width: 1200px) {
  .memedex-layout {
    margin-top: 20px;
    flex-direction: column;
    align-items: center;
  }
  .memedex-pad {
    margin: -88px 0 0 0;
    padding: 14px 8px 10px 8px;
    max-width: 44vw;
    min-width: 320px;
    transform: scale(0.92);
  }
  .footer-buttons {
    margin-top: 12px;
  }
  #button-0 {
    left: calc(50% - 12.5vw - 64px - 64px - 16px) !important;
  }
  #button-3 {
    left: calc(50% + 12.5vw + 64px - 192px + 80px) !important;
  }
  .sirrious-footer {
    font-size: calc(1.05em - 6pt) !important;
  }
  .memedex-pad.shake {
    animation: shake 0.5s linear 6;
    transform: scale(0.69) !important;
  }
  .winner-message {
    font-size: 1.1em !important;
    max-width: 50vw;
    white-space: normal;
    word-break: break-word;
    left: 10% !important;
    right: 10% !important;
  }
  .winner-message.left {
    left: 10% !important;
    transform: none !important;
    text-align: left;
  }
  .winner-message.right {
    right: 10% !important;
    transform: none !important;
    text-align: right;
  }
}
@media screen and (max-width: 1024px) {
  .memedex-layout {
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
  }
  .memedex-pad {
    max-width: 90vw;
    min-width: 220px;
    transform: scale(0.85);
    margin-top: -92px;
  }
  .footer-buttons {
    margin-top: 8px;
  }
  #button-0 {
    left: calc(50% - 12.5vw - 64px - 64px - 16px) !important;
  }
  #button-3 {
    left: calc(50% + 12.5vw + 64px - 192px + 80px) !important;
  }
  .sirrious-footer {
    font-size: calc(1.05em - 6pt) !important;
  }
  .memedex-pad.shake {
    animation: shake 0.5s linear 6;
    transform: scale(0.6375) !important;
  }
  .winner-message {
    font-size: 1em !important;
    max-width: 60vw;
    white-space: normal;
    word-break: break-word;
    left: 10% !important;
    right: 10% !important;
  }
  .winner-message.left {
    left: 10% !important;
    transform: none !important;
    text-align: left;
  }
  .winner-message.right {
    right: 10% !important;
    transform: none !important;
    text-align: right;
  }
}
@media (max-width: 900px) {
  .memedex-layout {
    flex-direction: column !important;
    align-items: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  .fixed-screen.fs1,
  .fixed-screen.fs2 {
    display: none !important;
  }
  .memedex-pad {
    max-width: 100vw !important;
    min-width: 0 !important;
    width: 100vw !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-buttons {
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }
  #button-0, #button-1, #button-2, #button-3 {
    width: 90vw;
    min-width: 0;
    max-width: 100vw;
    height: 44px;
    font-size: 1em;
    padding: 10px 0;
  }
  #arrowButtonDeck {
    position: static !important;
    margin: 20px auto 0 auto !important;
    left: unset !important;
    top: unset !important;
    width: 100% !important;
    max-width: none !important;
    display: flex;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    box-sizing: border-box;
    padding: 0 8px;
  }
  .arrow-buttons {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
  }
  .arrow-row {
    flex-direction: row;
    gap: 28px;
    width: 100%;
    justify-content: center;
  }
  .arrow-btn {
    width: 140px;
    height: 140px;
    font-size: 64px;
    min-width: 120px;
    min-height: 120px;
    flex: 1 1 0;
  }
}
@media screen and (max-width: 800px) {
  .fixed-screen {
    width: 98vw;
    min-width: 0;
    max-width: 98vw;
    height: 454px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  .fixed-screen .inner-screen,
  .fixed-screen .inner-img,
  .fixed-screen iframe {
    max-height: 50% !important;
    height: 50% !important;
    object-fit: contain !important;
    box-sizing: border-box;
  }
  .memedex-pad {
    max-width: 100vw;
    min-width: 0;
    padding: 2px 0 2px 0;
    transform: scale(0.7);
  }
  .footer-buttons {
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }
  #button-0, #button-1, #button-2, #button-3 {
    width: 98vw;
    min-width: 0;
    max-width: 100vw;
    height: 38px;
    font-size: 0.95em;
    padding: 8px 0;
  }
}
@media screen and (max-width: 500px) {
  .fixed-screen {
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
    height: 80px;
    margin: 2px 0 2px 0;
    padding: 1px 0;
    transform: scale(0.65);
  }
  .memedex-pad {
    max-width: 100vw;
    min-width: 0;
    padding: 1px 0 1px 0;
    transform: scale(0.6);
  }
  .footer-buttons {
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
  }
  #button-0, #button-1, #button-2, #button-3 {
    width: 99vw;
    min-width: 0;
    max-width: 100vw;
    height: 32px;
    font-size: 0.9em;
    padding: 6px 0;
  }
}
@media screen and (max-width: 1024px) {
  .fixed-screen {
    width: 220px !important;
    min-height: 220px !important;
    max-height: 340px !important;
    margin: 6px 2px 6px 2px;
    padding: 4px 2px;
  }
  .memedex-pad {
    transform: scale(0.65);
    padding: 6px 2px 6px 2px;
    margin: 4px 0 0 0;
    max-width: 90vw;
  }
  #gameCanvas, #rainCanvas, #winCanvas {
    width: 700px !important;
    height: 350px !important;
    max-width: 100%;
    max-height: 100%;
  }
  .footer-buttons {
    margin-top: 4px;
    gap: 8px;
  }
  #button-0, #button-1, #button-2, #button-3 {
    height: 38px;
    font-size: 0.95em;
    padding: 6px 0;
  }
}
@media screen and (min-width: 1334px) {
  .memedex-pad {
    transform: none !important;
    margin: 0 auto !important;
    max-width: 1000px !important;
    min-width: 0 !important;
  }
  .footer-buttons {
    margin-top: 24px !important;
    bottom: 64px !important;
    position: fixed !important;
    left: 0;
    width: 100vw;
  }
  .sirrious-footer {
    font-size: 1.05em !important;
    left: 18px !important;
    bottom: 18px !important;
    position: fixed !important;
    display: flex !important;
    align-items: center !important;
    background: none !important;
  }
}
@media screen and (min-width: 1601px) {
  .memedex-pad {
    transform: none !important;
    margin: 0 auto !important;
    max-width: 1000px !important;
    min-width: 0 !important;
  }
  .footer-buttons {
    margin-top: 24px !important;
    bottom: 64px !important;
    position: fixed !important;
    left: 0;
    width: 100vw;
  }
  .sirrious-footer {
    font-size: 1.05em !important;
    left: 18px !important;
    bottom: 18px !important;
    position: fixed !important;
    display: flex !important;
    align-items: center !important;
    background: none !important;
  }
}
@media (max-width: 600px) {
  .fixed-screen.fs1,
  .fixed-screen.fs2 {
    display: none !important;
  }
  .memedex-pad {
    max-width: 100vw !important;
    min-width: 0 !important;
    width: 100vw !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  #arrowButtonDeck {
    position: static !important;
    margin: 20px auto 0 auto !important;
    left: unset !important;
    top: unset !important;
    width: 100% !important;
    max-width: none !important;
    display: flex;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    box-sizing: border-box;
    padding: 0 8px;
  }
  .arrow-buttons {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }
  .arrow-row {
    flex-direction: row;
    gap: 24px;
    width: 100%;
    justify-content: center;
  }
  .arrow-btn {
    width: 140px;
    height: 140px;
    font-size: 64px;
    min-width: 120px;
    min-height: 120px;
    flex: 1 1 0;
  }
}
@media screen and (min-width: 1200px) {
  .memedex-pad {
    transform: scale(0.875);
  }
}

/* 15.5" Laptop Media Query - EXACT SAME SCALING AS MAIN SITE */
@media screen and (min-width: 1367px) and (max-width: 1600px) {
  /* Remove ALL scrollbars and margins */
  html, body {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #000000 !important;
  }

  /* Main layout scaling - EXACT SAME as main site approach */
  .memedex-layout {
    position: fixed !important;
    top: 0 !important;
    left: -360px !important;
    width: 156.25% !important;
    height: 156.25% !important;
    transform: scale(0.75);
    transform-origin: top center;
  }

  /* Main content area */
  .memedex-layout {
    position: absolute !important;
    width: 100% !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove ALL backgrounds that could cause margins */
  .footer-buttons,
  .footer-buttons > div,
  #button-0,
  #button-1,
  #button-2,
  #button-3 {
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Position and scale bottom buttons - EXACT SAME as main site */
  #button-0 {
    left: calc(50% - 37.5vw + 31px) !important; /* Moved right by further 3px */
  }
  #button-1 {
    left: calc(50% - 12.5vw - 33px) !important; /* Moved right by further 3px */
  }
  #button-2 {
    left: calc(50% + 12.5vw - 160px) !important; /* Moved right by 32px */
  }
  #button-3 {
    left: calc(50% + 37.5vw - 224px) !important; /* Moved right by 32px */
  }

  #button-0,
  #button-1,
  #button-2,
  #button-3 {
    transform: scale(0.75);
  }

  /* Position top buttons - Match index page perfect positioning */
  #player-name-button {
    left: 59px !important; /* CLOSER TO LEFT EDGE BY FURTHER 3px: 62px - 3px */
    top: 30px !important; /* Moved up by 2px: 32px - 2px */
    width: 312px !important; /* WIDER BY FURTHER 12px: 300px + 12px */
    height: 48px !important; /* SCALED DOWN: 64px * 0.75 = 48px */
    font-size: 15px !important; /* Scaled down font: 20px * 0.75 = 15px */
    transform: none !important;
  }

  #ca-screen {
    transform: translateX(-50%);
    width: 75vw !important;
    max-width: 645px !important; /* SHORTENED BY FURTHER 6px: 654px - 6px */
    height: 48px !important; /* SCALED DOWN: 64px * 0.75 = 48px */
    border: 3px solid #9acd32 !important; /* SCALED DOWN: 4px * 0.75 = 3px */
    border-radius: 8px !important; /* SCALED DOWN: 10px * 0.75 = 8px */
  }

  /* CA Screen text scaling */
  #ca-text, .ca-text {
    font-size: 13px !important; /* FURTHER SCALED DOWN: 15px * 0.87 for narrower button */
  }

  /* CA Screen hover state scaling */
  #ca-screen:hover {
    border: 3px solid #b0ff57 !important; /* SCALED DOWN: 4px * 0.75 = 3px */
    box-shadow:
      3px 3px 0 #333, /* SCALED DOWN: 4px * 0.75 = 3px */
      inset 1.5px 1.5px 0 #b0ff57, /* SCALED DOWN: 2px * 0.75 = 1.5px */
      inset -1.5px -1.5px 0 #669900, /* SCALED DOWN: 2px * 0.75 = 1.5px */
      0 0 9px #b0ff57 !important; /* SCALED DOWN: 12px * 0.75 = 9px */
  }

  /* CA Screen active state scaling */
  #ca-screen:active {
    box-shadow:
      1.5px 1.5px 0 #333, /* SCALED DOWN: 2px * 0.75 = 1.5px */
      inset 1.5px 1.5px 0 #b0ff57, /* SCALED DOWN: 2px * 0.75 = 1.5px */
      inset -1.5px -1.5px 0 #669900 !important; /* SCALED DOWN: 2px * 0.75 = 1.5px */
  }

  /* MATCH HOME PAGE BUTTON SIZE EXACTLY */
  .gtli-button {
    right: 61px !important; /* CLOSER TO RIGHT EDGE BY FURTHER 3px: 64px - 3px */
    top: 30px !important; /* Moved down by further 6px: 24px + 6px */
    transform: none !important;
    width: 312px !important; /* WIDER BY FURTHER 12px: 300px + 12px */
    height: 48px !important; /* SCALED DOWN: 64px * 0.75 = 48px */
    position: fixed !important;
    display: flex !important; /* Use flexbox like default */
    justify-content: center !important; /* Flexbox horizontal centering */
    align-items: center !important; /* Flexbox vertical centering */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2000 !important; /* Match default z-index */
    background: #1a2a1a !important; /* Original dark background */
    border: 3.5px solid #9acd32 !important; /* Balanced border thickness */
    border-radius: 8px !important; /* Scaled border-radius: 10px * 0.75 = 7.5px, rounded to 8px */
    box-shadow: 3.5px 3.5px 0 #333, inset 1.5px 1.5px 0 #b0ff57, inset -2px -2px 0 #669900 !important; /* Match balanced border */
    color: #9acd32 !important; /* Original green text */
    cursor: pointer !important; /* Pointer cursor on hover */
    font-family: 'Courier New', monospace !important;
    font-size: 15px !important; /* Scaled down font: 20px * 0.75 = 15px */
    font-weight: normal !important;
    text-shadow: 0 0 3px #9acd32 !important; /* Scaled text glow: 4px * 0.75 = 3px */
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s !important; /* Smooth transitions */
  }

  /* MATCH HOME PAGE HOVER EFFECT */
  .gtli-button:hover {
    border-color: #b0ff57 !important; /* Bright green border on hover */
    box-shadow: 3.5px 3.5px 0 #333, inset 1.5px 1.5px 0 #b0ff57, inset -2px -2px 0 #669900, 0 0 10.5px #b0ff57 !important; /* Match balanced border with scaled glow */
  }

  /* FIXED SCREENS - EXACT SAME POSITIONING AS MAIN SITE */
  .fixed-screen {
    width: 384px !important;
    min-width: 384px !important;
    height: 624px !important; /* EXACT SAME as main site */
    top: 142px !important; /* EXACT SAME as main site */
    padding: 16px !important;
    gap: 16px !important;
    transform: none !important;
  }

  /* LEFT PANEL - MOVED LEFT BY FURTHER 3PX */
  #fixed-screen {
    left: calc(50% - 465px) !important; /* Moved left by further 3px: 456px + 3px */
  }

  /* RIGHT PANEL - MOVED LEFT BY 12PX */
  #fixed-screen-2 {
    right: -656px !important; /* Moved left by 12px: -668px + 12px */
  }

  .fixed-screen .inner-screen {
    height: calc(50% - 8px) !important;
  }

  /* Game container and canvas - keep original dimensions, parent scaled */
  #game-container {
    transform: none !important;
  }

  #gameCanvas, #rainCanvas, #winCanvas {
    width: 800px !important;
    height: 400px !important;
  }

  /* Memedex pad - CENTERED positioning for 15.5" layout */
  .memedex-pad {
    transform: none !important;
    margin: 136px auto 40px auto !important;
    padding: 24px 16px 16px 16px !important;
    width: 900px !important;
    max-width: 900px !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(calc(-50% + 159px)) !important;
  }

  .memedex-pad h1 {
    font-size: 2.2em !important;
  }

  /* BUTTONS - EXACT SAME SCALING AS MAIN SITE */
  #restartBtn, #flexScoreBtn {
    font-size: 1.1em !important;
    padding: 12px 32px !important;
  }

  .arrow-btn {
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important;
  }

  /* WINNER MESSAGES - EXACT SAME POSITIONING */
  .winner-message {
    font-size: 2em !important;
  }

  .winner-message.left {
    left: 25% !important;
    transform: translateX(-100%) translateX(96px) !important;
  }

  .winner-message.right {
    right: 25% !important;
    transform: translateX(100%) translateX(-96px) !important;
  }

  /* REMOVE ARROW BUTTON DECK COMPLETELY */
  #arrowButtonDeck {
    display: none !important;
  }

  /* SCORE AND LEVEL - RESET SCALING */
  #score, #level {
    font-size: 1.2em !important;
  }

  /* ENSURE SNAKE SCREEN SHAKES WITHOUT SHRINKING MUCH */
  .memedex-pad.shake {
    transform: translateX(calc(-50% + 159px)) scale(0.85) !important;
    animation: shake 0.5s linear 6;
  }

  /* WINNER ANIMATION - CENTERED RELATIVE TO SNAKE SCREEN */
  .winner-message {
    font-size: 2em !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 156px !important; /* Moved up by 96px: 60px + 96px */
    transform: translateX(calc(-50% - 1px)) !important;
    text-align: center !important;
  }

  .winner-message.left,
  .winner-message.right {
    left: 50% !important;
    right: auto !important;
    bottom: 156px !important; /* Moved up by 96px: 60px + 96px */
    transform: translateX(calc(-50% - 1px)) !important;
    text-align: center !important;
  }

  /* FOOTER BUTTONS - MOVED UP BY FURTHER 9px */
  .footer-buttons {
    bottom: 9px !important; /* Moved up by further 9px: 0px + 9px */
  }

  /* Ensure Sirrious footer stays at bottom */
  .sirrious-footer {
    position: fixed !important;
    bottom: 10px !important;
    left: 10px !important;
    font-size: 13px !important; /* Scaled down for 15.5" media query */
  }

  /* Notification */
  #copied-notification {
    visibility: hidden;
    opacity: 0;
    z-index: 40 !important;
  }

  #ca-screen:active ~ #copied-notification {
    visibility: visible;
    opacity: 1;
  }
}