/* Game UI stays pixel-art: re-assert pixel stacks (site chrome moved to Inter). */
:root{
  --display: 'Pixelify Sans', 'Press Start 2P', monospace;
  --micro: 'VT323', 'Silkscreen', monospace;
}

/* =========================================================
   amandata.dev — playable othello styles.
   Everything keys off the theme tokens (--green, --sand,
   --panel, --ink, --line…), so the board re-tints with the
   dark / light / pink / blue themes automatically.
   ========================================================= */

.game-card{
  display: block;
  margin-bottom: 1.5rem;
  padding: 1.4rem 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0;
  box-shadow: var(--card-shadow);
}
.game-card[hidden]{display:none;}
.game-card__title{
  font-family: var(--micro);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.game-card__desc{
  color: var(--body-text);
  font-size: 0.95rem;
  margin: 0 0 1.2rem;
  max-width: 34rem;
}

/* score readout */
.othello-hud{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-family: var(--micro);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.othello-score{ display: flex; align-items: center; gap: 0.5rem; }
.othello-sep{ color: var(--dim); }

/* play-as color selector */
.othello-controls{
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.othello-seg{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--micro);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
}
.othello-seg__label{ color: var(--dim); margin-right: 0.3rem; }
.othello-seg__btn{
  font-family: var(--micro);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.25rem 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.othello-seg__btn:hover{ color: var(--sand); border-color: var(--sand); }
.othello-seg--active{
  color: var(--ink);
  border-color: var(--green);
}

/* mini discs used in the score line */
.mini-disc{
  display: inline-block;
  width: 1.1em; height: 1.1em;
  border-radius: 0;
  vertical-align: -0.15em;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.mini-disc--b{ background-color: transparent; }
.mini-disc--w{ background-color: transparent; }

/* the board: felt tinted by the theme accent, chunky pixel frame */
.othello-board{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-width: min(92vw, 440px);
  margin: 0 auto;
  padding: 8px;
  border-radius: 0;
  background: color-mix(in srgb, var(--green) 48%, var(--panel));
  border: 2px solid color-mix(in srgb, var(--green) 62%, var(--panel));
  box-shadow: 0 0 0 4px var(--panel), 0 0 0 6px color-mix(in srgb, var(--green) 62%, var(--panel));
}
.othello-cell{
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--green) 24%, var(--panel));
  cursor: default;
}
.othello-cell--hint{ cursor: pointer; }
.othello-cell--hint::after{
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 26%; height: 26%;
  transform: translate(-50%, -50%);
  border-radius: 0;
  background: color-mix(in srgb, var(--green) 75%, transparent);
}
.othello-cell--hint:hover::after{
  background: color-mix(in srgb, var(--green) 95%, transparent);
}
.othello-cell:focus-visible{
  outline: 2px solid var(--sand);
  outline-offset: -2px;
}

/* discs: pixel-art sprites drawn at 16px in JS, scaled up chunky */
.othello-disc{
  position: absolute;
  left: 50%; top: 50%;
  width: 86%; height: 86%;
  transform: translate(-50%, -50%);
  border-radius: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}
.othello-disc--b{ background-color: transparent; }
.othello-disc--w{ background-color: transparent; }
.othello-disc--last{
  outline: 2px solid var(--sand);
  outline-offset: 2px;
}

/* stepped flip: squash to nothing, JS swaps the sprite halfway, expand */
@keyframes othello-flip{
  0%{ transform: translate(-50%, -50%) scaleX(1); }
  50%{ transform: translate(-50%, -50%) scaleX(0); }
  100%{ transform: translate(-50%, -50%) scaleX(1); }
}
.othello-disc--flipping{ animation: othello-flip 0.22s steps(5) both; }
@media (prefers-reduced-motion: reduce){
  .othello-disc--flipping{ animation: none; }
}

.othello-status{
  text-align: center;
  font-family: var(--micro);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--dim);
  min-height: 2rem;
  margin: 1rem 0 0.6rem;
}
.othello-actions{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.othello-btn{
  font-family: var(--micro);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.35rem 1rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.othello-btn:hover{ color: var(--sand); border-color: var(--sand); }

.games-note{
  color: var(--dim);
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

/* toggle panels: scoreboard + how-to-play */
.othello-panel{
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.othello-panel__title{
  font-family: var(--micro);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 0.8rem;
}
.othello-rules{
  margin: 0;
  padding-left: 1.3rem;
  color: var(--body-text);
  font-size: 0.95rem;
}
.othello-rules li{ margin-bottom: 0.4rem; }

/* scoreboard */
.score-add{
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.score-input{
  flex: 1;
  min-width: 0;
  font-family: var(--micro);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.3rem 0.7rem;
}
.score-input::placeholder{ color: var(--faint); }
.score-input:focus{
  outline: none;
  border-color: var(--green);
}
.score-empty{
  color: var(--dim);
  font-size: 0.92rem;
  margin: 0;
}
.score-table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--micro);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}
.score-table th,
.score-table td{
  text-align: left;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--body-text);
}
.score-table th{
  color: var(--dim);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.score-table tr:last-child td{ border-bottom: 0; }
.score-table tbody tr, .score-table tr:not(:first-child){ cursor: pointer; }
.score-row--active td{ color: var(--sand); }

/* mode picker */
body.picking .section__head,
body.picking .games-note{display:none;}
body.picking .mode-pick__btns{margin-top:0;}
.mode-pick__demo{
  margin: 0 0 1.1rem;
  text-align: center;
}
.mode-pick__kicker{
  font-family: var(--micro);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.mode-pick__demo img{
  display: inline-block;
  width: 132px;
  height: auto;
  border: 1px solid var(--line);
  image-rendering: pixelated;
}
.mode-pick__btns{
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}
.mode-btn{
  display: block;
  text-align: left;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.mode-btn:hover{ border-color: var(--green); }
.mode-btn:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; }
.mode-btn__title{
  display: block;
  font-family: var(--micro);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--sand);
}
.mode-btn__sub{
  display: block;
  margin-top: 0.25rem;
  font-size: 0.92rem;
  color: var(--dim);
}

/* scoreboard tabs + big record */
.score-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}
.score-tab{
  font-family: var(--micro);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.score-tab:hover{ color: var(--ink); border-color: var(--green); }
.score-tab.is-active{
  background: var(--green);
  border-color: var(--green);
  color: #101408;
}
.score-big{
  font-family: var(--micro);
  font-size: 2.6rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  line-height: 1;
}
.score-big__sep{ color: var(--faint); margin: 0 0.35rem; }
.score-big__w{ color: var(--sand); }
.score-big__label{
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--dim);
}
.score-note{
  margin: 0.8rem 0 0;
  font-size: 0.88rem;
  color: var(--faint);
}

/* ---------- advanced study mode ---------- */
.adv-board-wrap{ margin: 1rem 0 0.4rem; }
.adv-coords{
  display: grid;
  font-family: var(--micro);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.adv-coords--top{
  grid-template-columns: 1.4rem repeat(8, 1fr);
  max-width: min(92vw, 440px);
  margin: 0 auto;
  padding: 0 8px;
  text-align: center;
}
.adv-board-row{
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  max-width: min(92vw, 440px);
  margin: 0 auto;
  align-items: stretch;
}
.adv-coords--side{
  grid-template-rows: repeat(8, 1fr);
  align-items: center;
  text-align: center;
  padding: 8px 0;
}
.adv-board{ margin: 0; max-width: none; }
.adv-cell--last{ outline: 3px solid #e05555; outline-offset: -3px; }
.adv-move-no{
  font-family: var(--micro);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.adv-coach{
  min-height: 2.6em;
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.8rem;
  font-size: 0.98rem;
  color: var(--body-text);
  border-left: 4px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.adv-coach--best{ border-left-color: var(--sand); }
.adv-coach--good{ border-left-color: var(--green); }
.adv-coach--ok{ border-left-color: var(--dim); }
.adv-coach--risky{ border-left-color: #d99a3d; }
.adv-coach--blunder{ border-left-color: #e05555; }
.adv-moves{
  margin: 0;
  padding-left: 0;
  list-style: none;
  max-height: 11rem;
  overflow-y: auto;
  font-family: var(--micro);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--body-text);
}
.adv-moves li{ padding: 0.18rem 0; border-bottom: 1px solid var(--line); }
.adv-moves__no{ color: var(--faint); margin-right: 0.5rem; }
.adv-moves__sep{ color: var(--faint); margin: 0 0.5rem; }
.adv-moves__mv--robot{ color: var(--dim); }
.adv-tag{
  font-size: 0.95rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--line);
  letter-spacing: 0.06em;
}
.adv-tag--best{ color: var(--sand); border-color: var(--sand); }
.adv-tag--good{ color: var(--green); border-color: var(--green); }
.adv-tag--ok{ color: var(--dim); }
.adv-tag--risky{ color: #d99a3d; border-color: #d99a3d; }
.adv-tag--blunder{ color: #e05555; border-color: #e05555; }
.adv-graph{
  width: 100%;
  height: auto;
  display: block;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--line);
  image-rendering: pixelated;
}
.adv-credit{
  margin: 1.2rem 0 0;
  font-size: 0.88rem;
  color: var(--faint);
}
.adv-credit strong{ color: var(--dim); }
.othello-btn:disabled{ opacity: 0.4; cursor: default; }

/* ---------- beginner tips + exercises ---------- */
.othello-board--mini{ max-width: 300px; }
.ex-cell--good{ outline: 3px solid var(--green); outline-offset: -3px; }
.ex-cell--bad{ outline: 3px solid #e05555; outline-offset: -3px; }
.ex-progress{ margin: 0 0 1rem; }
.ex-bar{
  height: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.ex-barfill{ height: 100%; width: 0; background: var(--green); }
.ex-ptext{
  font-family: var(--micro);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--dim);
  margin: 0.4rem 0 0;
}
.ex-board-wrap{ margin: 0 0 0.8rem; }
.ex-prompt{
  font-family: var(--micro);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 0.6rem;
  text-align: center;
}
.ex-feedback{
  min-height: 2.6em;
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  color: var(--body-text);
  border-left: 4px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.ex-feedback--good{ border-left-color: var(--green); }
.ex-feedback--bad{ border-left-color: #e05555; }
.ex-controls{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.ex-done{ text-align: center; padding: 2rem 1rem; }
.ex-done__big{
  font-family: var(--micro);
  font-size: 2.4rem;
  color: var(--sand);
}
.ex-done__title{
  font-family: var(--micro);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0.4rem 0;
}
.ex-done__sub{ font-size: 0.92rem; color: var(--dim); }
.tips-list{
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  color: var(--body-text);
  font-size: 0.95rem;
}
.tips-list li{ margin-bottom: 0.55rem; }
.tips-list strong{ color: var(--ink); }
.book-credit, .ex-credit{ font-size: 0.88rem; color: var(--faint); }
.book-credit{ margin: 0.8rem 0 0; }
.ex-credit{ margin: 0 0 1rem; }
.book-credit a, .ex-credit a{ color: var(--dim); text-decoration: underline; }
.book-credit a:hover, .ex-credit a:hover{ color: var(--sand); }