/* =====================================
Organization Structure - RapidWeaver/Foundation 6 Version:

 1 Font Imports - KEPT: Will eventually do with RW
 2 CSS Variables & Theme - KEPT: Core color scheme
 3 Base Styles & Layout - REMOVED: RW handles this
 4 Chessboard Styles - PARTIAL: Board/circles handled in RW, orientation commented
 5 Game Navigation Controls - PARTIAL: Buttons removed, kept pgnFileInput
 6 Game Selector (Old Standard) - Not used
 7 Custom Game Selector - KEPT: Important functionality
 8 Game Header Display - COMMENTED: Will style in RW
 9 Game Text & Move Notation - KEPT: Works nicely
10 Next Move Preview - KEPT: May replace later
11 Engine Analysis Controls - KEPT: Hidden initially, works with HTML stacks
12 Search Functionality - Need to check, not important now
13 Debug Panel - KEPT: Working fine in RW
14 Status & Error Messages - KEPT: Working fine
15 CHESS INFORMANT SYMBOLS 
=================================== */

/* ===================================
   FONT IMPORTS - KEPT
   =================================== */
   /*
@font-face {
  font-family: 'ChessMerida';
  src: url('../fonts/ChessSansMerida.woff') format('woff');
}

@font-face {
  font-family: 'ChessInformantReader';
  src: url('../fonts/ChessInformantReader.woff') format('woff');
}

/* ===================================
   CSS VARIABLES & THEME - KEPT
   =================================== */
:root {
    --circlePosn: 0px;
    --blue: rgb(19, 41, 75);
    --gold: #d9c89d; 
    --grey: rgb(199,201,199);
    --purple: #800080;
    --blue-purple: #2639A7;
    --red-purple: rgb(157, 0, 76);
    --green-purple: #005B78;
    --gold-purple: #5A4300;
    --red: rgb(187, 0, 0);
}

/* ===================================
   BASE STYLES & LAYOUT - REMOVED (RW handles this)
   =================================== */
/* 
body {
  font-family: sans-serif;
  padding: 10px;
  background-color: rgb(197, 206, 233);
}

h1 {
    background-color: rgb(19, 41, 75);
    text-align: center;
    color: rgb(217, 201, 157);
    padding: 10px 20px;
    border-radius: 20px;
    display: block;
    margin: 30px 70px;
}

#layoutContainer {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: flex-start;
  padding: 20px;
}

#leftColumn {
  flex-shrink: 0;
}

#rightColumn {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 ;
  padding: 0;
  align-items: flex-start;
}
*/

/* ===================================
   CHESSBOARD STYLES - PARTIAL
   Board/circles handled in RW, orientation commented
   =================================== */

/* Board orientation dropdown - COMMENTED (may style in RW) */
/*
#boardOrientation {
  display: inline-block;
  font-size: 1em;
  color: var(--gold);
  background-color: var(--blue);
  border: 1px solid #4a6fa5;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 5px;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23d9c89d' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  
  min-width: 80px;
  width: auto;
}

#boardOrientation:hover {
  border-color: #a3c1f7;
  background-color: rgb(25, 47, 81);
}

#boardOrientation:focus {
  border-color: #7ab6ff;
  box-shadow: 0 0 0 2px rgba(122, 182, 255, 0.3);
}

#boardOrientation option {
  background-color: var(--blue);
  color: var(--gold);
}
*/

/* ===================================
   GAME NAVIGATION CONTROLS - PARTIAL
   Buttons removed, kept pgnFileInput
   =================================== */

/* Keep pgnFileInput as it may not be RW translatable */
label[for="pgnFileInput"] {
/*  padding: 6px 12px; */
  background-color: var(--blue);
  color: var(--gold);
  border: 1px solid #ccc;
 /* border-radius: 16px; */
  cursor: pointer;
}

/* Control-row stuff COMMENTED (best to style within RW) */
/*
#buttons { 
  margin-left: 0px;
}

button, label[for="pgnFileInput"] {
  padding: 8px;
  margin: 2px;
}

.control-row {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  align-items: center;
  flex-wrap: wrap;
}

.control-row input[type="text"] {
  flex: 1;
  min-width: 200px;
  padding: 6px;
}

.control-row button {
  padding: 6px 12px;
  border-radius: 5px;
  background-color: #eef;
  border: 1px solid #ccc;
  cursor: pointer;
}

.control-group {
  display: inline-flex;
  align-items: center;
  margin: 3px 3px 3px 3px;
  background-color: var(--blue);
  color: var(--gold);
  border-radius: 12px;
  padding-left: 6px;
}
*/

/* ===================================
   GAME SELECTOR (OLD STANDARD) - Not used
   =================================== */

/* ===================================
   CUSTOM GAME SELECTOR - KEPT (Important functionality)
   =================================== */
.select-option,
.options-container div {
    font-size: 0.9em;
}

.custom-select {
    padding: 8px 0px; 
    margin: 0px 10px;
    position: relative;
    font-family: sans-serif;
    display: inline-block;
    width: max-content;
    min-width: 400px;
    max-width: 600px;
}

.select-option {
    padding: 12px 32px;
    background-color: var(--blue);
    border-radius: 12px;
    color: var(--gold);
    cursor: pointer;
    position: relative;
}

/* Arrow styling */
.select-option:after {
    position: absolute;
    content: "";
    top: 25px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: var(--gold) transparent transparent transparent;
}

.select-option.arrow-up:after {
    border-color: transparent transparent var(--gold) transparent;
    top: 20px;
}

/* Options container */
.options-container {
    position: absolute;
    background-color: rgb(0, 21, 52);
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 16px;
    height: 40vh;
    overflow: auto;
    display: none;
}

.options-container.open { 
    display: block;
}

.options-container div {
    color: var(--gold);
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
}

.option.mark {
    background-color: rgb(94, 110, 150);
}

/* Custom scrollbar for options */
.options-container {
    --scrollbar-color-thumb: var(--gold);
    --scrollbar-color-track: rgb(0, 21, 52);
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

@supports (scrollbar-width: auto) {
    .options-container {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

@supports selector(::-webkit-scrollbar) {
    .options-container::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .options-container::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .options-container::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

/* ===================================
   GAME HEADER DISPLAY - COMMENTED (Will style in RW)
   =================================== */
/*
#gameHeader {
  background-color: rgb(19, 41, 75);
  display: inline-block;
  width: fit-content;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 1.0em;
}*/
/*
.pgnHeader {
  color: rgb(217, 200, 157);
  font-family: sans-serif;
  margin-bottom: 4px;
}  */
/*
.headerRow {
  margin: 2px 0;
}

.headerKey {
  font-weight: bold;
  margin-right: 8px;
}

.headerValue {
  font-family: serif;
}
*/

/* ===================================
   GAME TEXT & MOVE NOTATION - KEPT (Works nicely)
   =================================== */

  /* 
#GameText {
  background-color: rgb(19, 41, 75);
  display: inline-block;
  padding: 20px 30px 10px 30px;
  border-radius: 15px;
  color: rgb(217, 200, 157);
 margin: 20px;
  line-height: 1.8; 
}
*/
.pgnMove {
  cursor: pointer;
  padding: 2px;
  font-family: 'ChessMerida', serif;
  font-size: 1.0em;
}

.pgnMove:hover {
  background-color: rgba(120, 140, 180, 0.9);
  border-radius: 4px;
}

.currentMove {
  background: rgb(230, 245, 255);
}

.mainLineMove {
  color: rgb(217,200,157);
  font-weight: normal;
}

.variationMove {
  color: rgb(197,206,233);
  font-style: italic;
  opacity: 0.85;
}

.variationMove:hover {
  color: rgba(233, 224, 197, 0.8);
}

.pgnNumber, .moveNumber {
  font-weight: bold;
  margin-right: 1px;
  font-size: 1.0em;
}
/*
.pgnComment {
  color: rgb(0, 135, 121);
  font-style: italic;
  margin-left: 4px;
  font-size: 1.0em;
} */

.NAGs, .NAGl {
  font-family: 'ChessInformantReader', sans-serif;
}

/* ===================================
   NEXT MOVE PREVIEW - KEPT (May replace later)
   =================================== */
   /*
#nextMovePreview {
  background-color: rgb(19, 41, 75);
  display: inline-block;
  border-radius: 12px;
  margin-bottom: 10px;  
  padding: 15px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 10px;
  max-width: 100%;
  white-space: normal;
}
*/
.moveLabel {
  font-family: sans-serif;
  font-weight: bold;
  margin: 0 10px 0 12px;
  color: rgb(157, 179, 217);
  display: inline-block;
}

/* ===================================
   ENGINE ANALYSIS CONTROLS - KEPT (Works with HTML stacks)
   =================================== */
#engineControls, #engineOutput {
  display: none;
  vertical-align: top;
  margin-top: 0;
}

#engineEval, #enginePV {
  font-family: Playfair Display;
  font-size: 0.85em;
  background: var(--blue);
  border: 1px solid #ccc;
  padding: 6px 10px;
  margin: 8px 2px;
  border-radius: 8px;
  color: var(--gold);
  max-width: 50%;
}

.enginePreview {
  font-family: serif;
  background: #f4f4f4;
  padding: 6px 10px;
  margin-top: 8px;
  border: 1px solid #ccc;
  white-space: pre-wrap;
}

.playedLine {
   font-family: 'ChessMerida';
  color: var(gold);
  font-style: italic;
  margin-bottom: 4px;
}

.engineLine {
   font-family: 'ChessMerida';
  color: var(gold);
  font-weight: bold;
  margin-top: 6px;
}

.engineLine .label {
  font-weight: bold;
  margin-right: 6px;
  font-family: sans-serif;
}

.label {
  font-family: system-ui, sans-serif;
  font-weight: bold;
  margin-right: 4px;
}

/* ===================================
   SEARCH FUNCTIONALITY - Need to check, not important now
   =================================== */
.search-result {
  padding: 6px;
  border-bottom: 1px solid rgb(157, 179, 217);
  cursor: pointer;
}

.search-result:hover {
  background: #eef;
}

/* ===================================
   DEBUG PANEL - KEPT (Working fine in RW)
   =================================== */
#debugPanel {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-family: 'Playfair Display';
  font-size: 0.8em;
  background: var(--blue);
  border: 1px solid #ccc;
  padding: 6px 10px;
  margin: 8px 12px;
  border-radius: 8px;
  color: var(--gold);
  max-width: 90%;
}

#debugPanel.visible {
  display: flex;
}

/* ===================================
   STATUS & ERROR MESSAGES - KEPT (Working fine)
   =================================== */
#statusMessage {
  margin: 10px 20px;
  padding: 10px 15px;
  background-color: var(--blue);
  color: var(--gold);
  border-left: 4px solid #c00;
  font-weight: bold;
  border-radius: 6px;
  display: none;
}

/* ===================================
   RESPONSIVE TURN INDICATOR CIRCLES
   For RW/Foundation 6 with responsive board
   =================================== */
/*
#board-wrapper {
  position: relative;
  display: inline-block;
  width: 100%; /* Responsive width instead of fixed 
} 

/* Board should be responsive 
#board {
  width: 100%; /* Changed from fixed 500px 
  margin-bottom: 10px;
}
*/
/* Turn indicator circles - responsive positioning 
.circle {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  position: absolute;
  right: -40px; /* Keep horizontal offset 
  transition: all 0.1s ease;
  border: 2px solid rgba(0,0,0,0.3);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 10;
  /* Remove fixed top positions - now handled by JS *
}

#black-circle {
  background-color: rgb(19, 41, 75);
  visibility: hidden;
}

#white-circle {
  background-color: rgb(255, 255, 255);
  visibility: hidden;
}

/* Optional: Scale circles with board size on smaller screens */
@media (max-width: 768px) {
  .circle {
    width: 25px;
    height: 25px;
    border-radius: 12.5px;
    right: -35px;
  }
} 

.mainLineMove .moveNumber {
  color: rgb(217,200,157); /* Your intended gold */
}

.variationMove .moveNumber {
  color: rgb(197,206,233); /* Your intended variation color */
}

#nextMovePreview .pgnComment {
  font-family: sans-serif;
}




/* ===================================
   CHESS INFORMANT SYMBOLS - Add to pgnViewer.css
   =================================== */

/* Chess Informant font classes */
.NAGs, .NAGl { 
  font-family: 'ChessInformantReader', sans-serif; 
  line-height: 1em; 
}

/* Small symbols (standard NAGs) */
.NAGs {
  font-size: 1.0em;
  vertical-align: baseline;
}

/* Large symbols (strategic annotations) */
.NAGl {
  font-size: 1.1em;
  vertical-align: baseline;
  font-weight: normal;
}

/* Ensure proper spacing in move notation */
.pgnMove .NAGs,
.pgnMove .NAGl {
  margin-left: 2px;
  margin-right: 1px;
}

/* Special styling for comment NAGs */
.pgnComment .NAGs,
.pgnComment .NAGl {
  color: inherit;
}

/* Next move preview NAG styling */
#nextMovePreview .NAGs,
#nextMovePreview .NAGl {
  color: inherit;
}