/* ============================================================
   Reversi / Othello — tema sunset, tabuleiro verde escuro clássico.
   ============================================================ */

.sj-game-host:has(.rvs) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;
  --rvs-board:         #1b6b3a;    /* verde escuro clássico */
  --rvs-board-dark:    #0f4426;
  --rvs-grid-line:     rgba(0, 0, 0, 0.45);
}
.sj-game-host:has(.rvs),
body:has(.sj-game-stage) .sj-game-host:has(.rvs) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.rvs) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.rvs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

/* ============ Board ============ */
.rvs-board-wrap {
  /* --cell setado pelo JS conforme stage */
  display: grid;
}
.rvs-board {
  display: grid;
  grid-template-columns: repeat(8, var(--cell, 56px));
  grid-template-rows:    repeat(8, var(--cell, 56px));
  gap: 2px;
  padding: 10px;
  background: linear-gradient(160deg, var(--rvs-board) 0%, var(--rvs-board-dark) 100%);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.10),
    0 10px 30px rgba(45, 36, 56, 0.30);
  position: relative;
  touch-action: none;
}
.rvs-board.is-locked,
.rvs-board.is-cpu-turn { cursor: default; }

/* Cada célula — fundo verde, grid line via outline interno */
.rvs-cell {
  width: var(--cell, 56px);
  height: var(--cell, 56px);
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(0,0,0,0.10));
  position: relative;
  cursor: default;
  box-shadow: inset 0 0 0 1px var(--rvs-grid-line);
}

/* Hint de jogada válida — pontinho central */
.rvs-cell.is-valid::before {
  content: '';
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  transition: opacity .15s ease;
}
.rvs-board:not(.is-locked):not(.is-cpu-turn) .rvs-cell.is-valid { cursor: pointer; }
.rvs-board:not(.is-locked):not(.is-cpu-turn) .rvs-cell.is-valid:hover {
  background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(0,0,0,0.05));
}
.rvs-board:not(.is-locked):not(.is-cpu-turn) .rvs-cell.is-valid:hover::before {
  opacity: 0;
}

/* Preview do disco que seria colocado */
.rvs-cell.is-hover::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c, #fff), var(--cd, #ddd));
  opacity: 0.30;
  pointer-events: none;
}
.rvs-cell.is-hover.t-b { --c: #4a4a4a; --cd: #000; }
.rvs-cell.is-hover.t-w { --c: #ffffff; --cd: #c4c4c4; }

/* Cells que seriam capturadas — outline ciano */
.rvs-cell.is-flip-preview {
  box-shadow:
    inset 0 0 0 1px var(--rvs-grid-line),
    inset 0 0 0 3px rgba(255, 217, 61, 0.85);
}

/* Cantos com marcação sutil */
.rvs-cell.is-corner {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.15));
}

/* ============ Discos ============ */
.rvs-disc {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: none;
}
.rvs-disc-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rvs-disc-face.f-b {
  background: radial-gradient(circle at 35% 30%, #4a4a4a 0%, #000 75%);
  box-shadow:
    inset 0 -4px 8px rgba(255, 255, 255, 0.08),
    inset 0 4px 8px rgba(255, 255, 255, 0.20),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.rvs-disc-face.f-w {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #c4c4c4 80%);
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.18),
    inset 0 4px 8px rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
/* Lado de trás rotacionado 180° */
.rvs-disc-face.f-back { transform: rotateY(180deg); }

/* Flip: peça preta vira branca → rotateY 0→180, e vice-versa. JS aplica
   .is-flipping pra disparar a transição. */
.rvs-disc.is-flipping {
  transition: transform .35s cubic-bezier(.34, 1.2, .64, 1);
}
.rvs-disc.is-flipped { transform: rotateY(180deg); }

/* Animação "pop" pra peça recém colocada */
@keyframes rvs-place {
  0%   { transform: scale(0.4); opacity: 0.2; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.rvs-disc.is-placed {
  animation: rvs-place .25s ease-out;
}

/* Estado lockado/CPU — escurece sutilmente */
.rvs-board.is-cpu-turn { filter: saturate(0.92); }

/* ============ Mobile ============ */
@media (max-width: 600px) {
  .rvs { gap: 10px; padding: 10px; }
  .rvs-board { gap: 1px; padding: 6px; }
}