/* /Components/GridV2.razor.rz.scp.css */
/* Static styles for GridV2 component */
/* Note: grid-template-columns and grid-template-rows are in the .razor file
   because they use Razor syntax (@Game.GridSize) which doesn't work in .css files */

#grid[b-aialptydvz] {
  display: grid;
  max-width: fit-content;
  margin-inline: auto;
  border: 1px solid black;
}

.cell[b-aialptydvz] {
  border: 1px solid black;
  text-align: center;
}

.player[b-aialptydvz]::before {
  content: '▢';
  font-size: 60px;
  color: #0066cc;
  line-height: 60px;
}

.droppable[b-aialptydvz]::after {
  content: '●';
  font-size: 30px;
  color: #0066cc;
  line-height: 60px;
  font-family: mono;
}

.cell.droppable.player[b-aialptydvz] {
  position: relative;
  &::before {
    width: 100%;
    position: absolute;
    right: 0
  }
}
/* /Components/GridV3.razor.rz.scp.css */
/* Static styles for GridV3 component */
/* Note: grid-template-columns and grid-template-rows are in the .razor file
   because they use Razor syntax (@Game.GridSize) which doesn't work in .css files */

/* V3 Enhancements:
   - Droppables appear as blue dots (like V2 player)
   - Collected droppables turn the cell black (like V2 droppable background)
*/

#grid[b-wzlwibsqpw] {
  display: grid;
  max-width: fit-content;
  margin-inline: auto;
  border: 1px solid black;
}

.cell[b-wzlwibsqpw] {
  border: 1px solid black;
  text-align: center;
}

/* Player styling - white square */
.player[b-wzlwibsqpw]::before {
  content: '▢';
  font-size: 60px;
  color: #0066cc;
  line-height: 60px;
}

/* Droppable styling - blue dot (same as V2 player) */
.droppable[b-wzlwibsqpw]::after {
  content: '●';
  font-size: 30px;
  color: #0066cc;
  line-height: 60px;
  font-family: mono;
}

.cell.droppable.player[b-wzlwibsqpw] {
  position: relative;
  &::before {
    width: 100%;
    position: absolute;
    right: 0
  }
}

/* Collected state - black background (same as V2 droppable) */
.collected[b-wzlwibsqpw] {
  background-color: black;
}

/* /Pages/Home.razor.rz.scp.css */
.top-info>button[b-bdmrb13f9e] {
  margin-inline: 2px;
}
.top-info[b-bdmrb13f9e] {
  font-family: monospace;
  max-width: fit-content;
  margin-inline: auto;
}
button>h1[b-bdmrb13f9e] {
  margin-block: 1px;
  font-family: monospace;
}
.top-info>h1[b-bdmrb13f9e] {
  display: inline-block
}

h1>.system-key[b-bdmrb13f9e] {
  margin-inline: 3px;
}

dialog[b-bdmrb13f9e] {
  font-family: monospace;
  padding: 20px;
  border: 2px solid #333;
  border-radius: 4px;
}

dialog[b-bdmrb13f9e]::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.form-row[b-bdmrb13f9e] {
  display: grid;
  grid-template-columns: 80px 60px 60px 60px;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.form-row label[b-bdmrb13f9e] {
  text-align: left;
}

.system-key[b-bdmrb13f9e] {
  text-align: center;
  padding: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-weight: bold;
}

.form-row input[b-bdmrb13f9e] {
  padding: 5px;
  font-family: monospace;
  text-align: center;
  border: 1px solid #999;
  border-radius: 3px;
}

.form-row input:focus[b-bdmrb13f9e] {
  outline: none;
  border-color: #007bff;
}