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

.page-layout{ }
html, body{ height:100%; }
body{ display:flex; min-height:100vh; flex-direction:column; }
main{ flex:1 0 auto; }
footer{ margin-top:auto; }

.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 }
.game-controls .btn{
  cursor:pointer;
  /* Coral-style buttons to match site accent */
  background: var(--accent);
  color:#fff;
  border:1px solid color-mix(in oklab, var(--accent) 60%, transparent);
}


/* Modal for games */
.game-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:
  radial-gradient(80vw 55vh at -10% -10%, rgba(255,0,120,.20), transparent 60%),
  radial-gradient(80vw 55vh at 110% -10%, rgba(0,200,255,.20), transparent 60%),
  radial-gradient(90vw 60vh at 50% 110%, rgba(0,150,255,.22), transparent 60%),
  color-mix(in oklab, black 65%, transparent);
  backdrop-filter: blur(8px) saturate(120%);
}
.game-modal.open{ display:flex }
.game-modal-inner{ width: min(96vw, 1200px, calc((90vh - 60px) * 4 / 3)); height: 90vh; border-radius:16px; background:
  radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--polar-sea) 8%, transparent), transparent 60%),
  linear-gradient(180deg, color-mix(in oklab, var(--bg-elev) 94%, transparent), color-mix(in oklab, var(--bg) 88%, transparent));
  border:1px solid color-mix(in oklab, var(--text) 12%, transparent); box-shadow: var(--shadow); overflow:hidden; display:flex; flex-direction:column }
.game-modal-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid color-mix(in oklab, var(--accent) 25%, transparent); background: color-mix(in oklab, var(--bg) 86%, transparent) }
.game-modal-body{ position:relative; width:100%; background: var(--bg-elev); flex: 1 1 auto; min-height:0 }
#modalFrame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; display:block }

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

/* Buttons host sparkles via JS */
.game-btn{ position:relative }

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