/* 
  Octarule Project
  Author: Keith (Arc.Keith)
  Created: July 2025
  License: Creative Commons Attribution 4.0 International (CC BY 4.0)
  https://creativecommons.org/licenses/by/4.0/
*/

body {
      background: #111;
      color: #cfd8dc;
      
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      
    }
    h1 {
      margin: 2rem 0 0.5rem;
      font-size: 1.6rem;
    }
    p {
      font-size: 1rem;
      margin-bottom: 1rem;
    }
    .game-box {
      margin: 2rem 0 2rem;
      text-align: center;
    }
    .ascii-wrapper {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 1000px;
    }
    table {
      border-collapse: collapse;
      width: 300px;
      background: #111;
      margin-bottom: 1rem;
    }
    th, td {
      border: 1px solid #333;
      padding: 0.5rem;
      text-align: center;
    }
    th {
      background: #222;
    }
    button {
      background: #3f51b5;
      color: white;
      padding: 0.4rem 1rem;
      margin: 0.25rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    input {
      padding: 0.3rem 0.6rem;
      font-size: 1rem;
      background: #222;
      color: #cfd8dc;
      border: 1px solid #333;
      border-radius: 4px;
      margin: 0.25rem;
    }
    .footer {
      margin-top: auto;
      padding: 1rem;
      font-size: 0.85rem;
      color: #777;
      text-align: center;
    }
    button.flash {
  animation: flash-bg 1s ease;
}

@keyframes flash-bg {
  from { background-color: #3f51b5; }
  50%  { background-color: #7986cb; }
  to   { background-color: #3f51b5; }
}

#nextpage {
  text-align: center;
}