/**  
 *   2004-12   : version 1 
 *   2026-01-25: site navigation
**/

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #00008b;              /* darkblue */
    background-color: #ffffff;   /* white    */
    line-height: 1.5;
    margin: 0;
}


p.update {
    font-style: italic;
    font-size: 12px;
    width: 808px;
    margin: 30px 0px 50px 0px;
    text-align: left;
}

img.validated {
    height: 20px;
    width: 62px;
    border: 0;
    float: right;
    padding-left: 10px;
}

.center {
    text-align: center;
}

.small {
    font-size: small;
}

.greyed-out {
    color: #94A9ef;   /* lightblue */
}

.no-border {
    border: 0;
}

.illustration {
    font-size: small;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
}

table.simple {
    margin-top: 50px;
}

td.a-third {
    width: 30%;
}

/* Layout */
#main {
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 1rem 3rem;
}

/* Better defaults */
h1, h2, h3 {
    color: #00008b;
    line-height: 1.2;
}

p {
    margin: 0.75rem 0;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

nav li {
    margin: 0.5rem 0;
}

table.simple {
    width: 100%;
    border-collapse: collapse;
}

table.simple td {
    vertical-align: top;
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}



/* Responsive site navigation (no JS) */
.site-nav {
  margin: 1rem 0 0;
}

.site-nav__details {
  border: 1px solid #94A9ef;
  border-radius: 0.75rem;
  padding: 0.25rem 0.75rem;
}

.site-nav__summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.5rem 0;
}

.site-nav__summary::marker {
  font-size: 0.9em;
}

.site-nav__list {
  list-style: none;
  padding: 0.5rem 0 0.75rem;
  margin: 0;
}

.site-nav__list li {
  margin: 0.5rem 0;
}

.site-nav__list a {
  text-decoration: none;
  padding: 0.25rem 0;
  display: inline-block;
}

.site-nav__list a[aria-current="page"] {
  text-decoration: underline;
  font-weight: bold;
}

/* Center the navigation block on the index page */
nav[aria-label="Site"] {
  max-width: 22rem;     /* controls the block width */
  margin: 2rem auto;   /* centers the block */
  text-align: center;
}

/* Remove default list indentation */
nav[aria-label="Site"] ul {
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
}

/* Space the links vertically */
nav[aria-label="Site"] li {
  margin: 0.5rem 0;
}

/* =========================
   Play page (Boku UI)
   Scoped to body.play
========================= */

body.play .play-grid{
  --board-w: 650px;
  --board-pad: 10px;
  display: grid;
  grid-template-columns: calc(var(--board-w) + (2 * var(--board-pad))) 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 1rem;
}

body.play .panel{
  border: 1px solid #d9dee6;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

body.play .board-col{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  min-width: 0;
}

body.play #boardWrap{
  padding: var(--board-pad);
  width: calc(var(--board-w) + (2 * var(--board-pad)));
  box-sizing: border-box;
}

body.play #board{
  display: block;
  width: var(--board-w);
  min-width: 0;
  height: 600px;
  /* ensure the SVG acts like a clipped window (narrower green margins left/right) */
  overflow: hidden;
  border-radius: 8px;
}

body.play .hint{
  margin: 0 0 6px;
  min-height: 18px;
}

/* Controls under the board */
body.play .controls{
  padding: 10px 12px;
}

body.play .status-line{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: baseline;
  margin-bottom: 10px;
}

body.play .buttons-line{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.play button{
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}

/* =========================
   Unified control styling
========================= */

body.play .buttons-line button,
body.play .buttons-line select {
  height: 40px;              /* unified control height */
  padding: 0 12px;           /* horizontal padding only */
  font: inherit;
  line-height: 1;            /* avoid browser quirks */
  box-sizing: border-box;
}

/* Button-specific (keep look you already have) */
body.play .buttons-line button {
  cursor: pointer;
}

/* Select-specific tweaks */
body.play .buttons-line select {
  border: 1px solid #d9dee6;
  border-radius: 10px;
  background: #fff;
}


body.play .buttons-line label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.play .log-panel{
  padding: 10px 12px;
  min-width: 0;
}

body.play #log{
  background: #0b0f14;
  color: #e6edf3;
  border-radius: 10px;
  padding: 10px;
  height: 540px;
  overflow: auto;
  margin: 0.5rem 0 0;
  white-space: pre-wrap;
}

/* When the viewport is narrower than the site max-width,
   stack the log underneath board+controls */
@media (max-width: 900px){
  body.play .play-grid{
    grid-template-columns: 1fr;
  }
  body.play #board{
    width: 100%;
    height: 600px;
    /* keep cropping behaviour */
    overflow: hidden;
  }
  body.play #log{
    height: 260px;
  }
}

body.play #main{
  min-width: 0;
}