/* ============================================================
   Solitaire — game-specific styles
   ============================================================ */

.sol-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.sol-draw-toggle {
  display: inline-flex;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.sol-draw-toggle button {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 7px 14px;
  border: none;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.sol-draw-toggle button.active {
  background: var(--ink);
  color: #fff;
}

/* --- Card sizing tokens ---
   --card-w is computed in JS (see updateCardSize in solitaire.js) to
   exactly fill the tableau row's actual available width with no
   leftover space. The value below is just a fallback before JS runs. */
.sol-board {
  --card-w: 48px;
  --card-h: calc(var(--card-w) * 1.4);
  --stack-gap: calc(var(--card-h) * 0.26);
  --tableau-gap: calc(var(--card-w) * 0.05);
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}

.sol-top-row {
  display: flex;
  gap: calc(var(--card-w) * 0.06);
  margin-bottom: calc(var(--card-w) * 0.25);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  touch-action: pan-x;
}
.sol-foundation-row {
  display: flex;
  gap: calc(var(--card-w) * 0.05);
  margin-left: auto;
  flex-shrink: 0;
}
.sol-spacer {
  flex: 0 0 calc(var(--card-w) * 0.4);
}

.sol-tableau-row {
  display: flex;
  gap: var(--tableau-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  touch-action: pan-x;
}
.sol-tableau-col {
  position: relative;
  width: var(--card-w);
  flex-shrink: 0;
}

.sol-pile-slot {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: calc(var(--card-w) * 0.12);
  border: 2px dashed var(--line);
  box-sizing: border-box;
  flex-shrink: 0;
}
.sol-pile-slot .suit-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--card-w) * 0.5);
  color: var(--line);
  pointer-events: none;
}

/* --- Cards --- */
.sol-card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: calc(var(--card-w) * 0.12);
  border: 2px solid var(--ink);
  background: var(--surface);
  box-shadow: 0 2px 0 rgba(34,49,74,0.15);
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  font-family: var(--font-display);
}

.sol-card.selected {
  box-shadow: 0 0 0 3px var(--light-blue), 0 2px 0 rgba(34,49,74,0.15);
  transform: translateY(-4px);
}

.sol-card .corner {
  position: absolute;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-size: calc(var(--card-w) * 0.19);
}
.sol-card .corner.tl { top: 6%; left: 8%; }
.sol-card .corner.br { bottom: 6%; right: 8%; transform: rotate(180deg); }
.sol-card .pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--card-w) * 0.42);
}

.sol-card.red { color: #E6392C; }
.sol-card.black { color: #22314A; }

.sol-card.face-down {
  background: repeating-linear-gradient(45deg, var(--light-blue), var(--light-blue) 6px, var(--light-blue-deep) 6px, var(--light-blue-deep) 12px);
  border: 2px solid var(--ink);
}

.sol-stock-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--card-w) * 0.4);
  color: var(--ink-soft);
}

.sol-drag-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 100;
}
.sol-drag-layer .sol-card {
  position: absolute;
  animation: none;
  box-shadow: 0 10px 18px rgba(34,49,74,0.35);
}
.sol-card.dragging-source {
  opacity: 0;
}

/* --- Fullscreen mode --- */
#game-stage:fullscreen,
#game-stage.obg-fake-fullscreen {
  border-radius: 0;
  border: none;
  width: 100vw;
  height: 100vh;
  justify-content: flex-start;
  background: var(--bg-soft);
  overflow-y: auto;
}

@media (max-width: 480px) {
  .sol-top-row { margin-bottom: calc(var(--card-w) * 0.4); }
}