/* AI Arcade Games — inherits TekTinkers theme from /tt/css/style.css */

/* Prevent all buttons from growing - MUST be at top for highest priority */
#forumBtn,
#forumBtn:hover,
#forumBtn:focus,
#forumBtn:active,
#forumBtn::before,
#forumBtn::after {
  all: unset;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  min-width: 70px !important;
  width: 70px !important;
  max-width: 70px !important;
  height: 38px !important;
  background: linear-gradient(135deg, #5981B1, #365475) !important;
  color: #fff !important;
  border: 1px solid rgba(152, 186, 227, 0.35) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transform: none !important;
  scale: 1 !important;
  transition: background 0.2s ease !important;
  flex: 0 0 70px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 70px !important;
  margin-right: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  gap: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
#forumBtn:hover {
  background: linear-gradient(135deg, #6B9BD1, #4A6B95) !important;
  transform: none !important;
  scale: 1 !important;
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  height: 38px !important;
  padding: 10px 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
.site-header .btn,
.site-header .btn:hover,
.site-header nav .btn,
.site-header nav .btn:hover {
  transform: none !important;
  scale: 1 !important;
}

.page-layout{ }
html, body{ 
  height:100%;
  background: linear-gradient(135deg, #5981B1, #365475) !important;
  background-attachment: fixed !important;
  background-image: none !important;
}
body{ 
  display:flex; 
  min-height:100vh; 
  flex-direction:column;
  background: linear-gradient(135deg, #5981B1, #365475) !important;
  background-attachment: fixed !important;
  background-image: none !important;
}
main{ flex:1 0 auto; }
footer{ margin-top:auto; }
.page-wrap {
  background: transparent !important;
}

.wrap{ max-width: var(--container); margin:auto; padding: 20px }

.game-controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin: 10px 0 14px }
.game-controls .btns{ display:flex; gap:10px; flex-wrap:wrap }

/* Override main CSS .game-btn rules - MUST override width, height, flex, line-height */
.game-controls .btn.game-btn,
.game-controls button.btn.game-btn {
  cursor:pointer !important;
  background: var(--accent) !important;
  color:#fff !important;
  border:1px solid color-mix(in oklab, var(--accent) 60%, transparent) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: auto !important;
  flex: 0 0 auto !important;
  min-width: fit-content !important;
  width: fit-content !important;
  max-width: fit-content !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  line-height: normal !important;
  transform: none !important;
  scale: 1 !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  transition: none !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  box-shadow: var(--shadow) !important;
  margin: 0 !important;
  text-align: left !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.game-controls .btn.game-btn:hover,
.game-controls .btn.game-btn:focus,
.game-controls .btn.game-btn:active,
.game-controls button.btn.game-btn:hover,
.game-controls button.btn.game-btn:focus,
.game-controls button.btn.game-btn:active {
  transform: none !important;
  scale: 1 !important;
  width: fit-content !important;
  height: auto !important;
  padding: 10px 14px !important;
  min-width: fit-content !important;
  max-width: fit-content !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  line-height: normal !important;
  box-shadow: var(--shadow) !important;
  border-width: 1px !important;
  border-style: solid !important;
  margin: 0 !important;
  outline: none !important;
  outline-offset: 0 !important;
}

.game-btn span {
  display: inline-block !important;
  width: fit-content !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Prevent sparkles from affecting button size */
.game-btn.sparkle-host {
  position: relative !important;
  overflow: visible !important;
}
.game-btn .sparkle {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}

/* Modal for games */
.game-modal{ 
  position:fixed; 
  inset:0; 
  z-index:1000; 
  display:none; 
  align-items:center; 
  justify-content:center; 
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}
.game-modal.open{ display:flex }
.game-modal-inner{ 
  width: min(96vw, 1200px, calc((90vh - 60px) * 4 / 3)); 
  height: 90vh; 
  border-radius:24px; 
  background: rgb(14, 22, 35);
  border: 2px solid rgba(152, 186, 227, 0.2);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7); 
  overflow:hidden; 
  display:flex; 
  flex-direction:column;
}
.game-modal-top{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:20px; 
  padding:20px 28px; 
  border-bottom:2px solid rgba(152, 186, 227, 0.15); 
  background: rgb(21, 39, 60);
}
.game-modal-top strong {
  color: #E8EEF9;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.game-modal-top #gameClose,
.game-modal-top .btn.small,
.game-modal-top button.btn,
.game-modal-top button {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px !important;
  min-width: 80px !important;
  width: 80px !important;
  max-width: 80px !important;
  height: 38px !important;
  background: linear-gradient(135deg, #5981B1, #365475) !important;
  color: #fff !important;
  border: 1px solid rgba(152, 186, 227, 0.3) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transform: none !important;
  scale: 1 !important;
  transition: background 0.2s ease !important;
  flex: 0 0 80px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 80px !important;
}
.game-modal-top #gameClose:hover,
.game-modal-top .btn.small:hover,
.game-modal-top button.btn:hover,
.game-modal-top button:hover {
  background: linear-gradient(135deg, #6B9BD1, #4A6B95) !important;
  transform: none !important;
  scale: 1 !important;
  padding: 10px 20px !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 38px !important;
}
.game-modal-body{ 
  position:relative; 
  width:100%; 
  background: rgb(14, 22, 35); 
  flex: 1 1 auto; 
  min-height:0;
  overflow: hidden;
}
#modalFrame{ 
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%; 
  border:0; 
  background:linear-gradient(135deg, #5981B1, #365475); 
  background-attachment: fixed;
  display:block;
}

.tips{ margin-top:14px }
.tips ul{ margin:6px 0 0 18px }

@media (max-width: 780px){ .game-modal-inner{ width: 98vw; max-height: 96vh } }