/* Sokoban's base rules and its other three skins are still in site.css; this sheet holds only Quiet. */
.skg {
  --skg-quiet-floor: #e9dfc8;
  --skg-quiet-line: rgba(106, 84, 48, .13);
  --skg-quiet-wall: #4b5c51;
  --skg-quiet-face: #313f37;
}

.skg[data-skin="quiet"] .skg-board {
  gap: 0; padding: 0; overflow: hidden;
  border: 0; border-radius: 6px;
  background: transparent; box-shadow: none;
  filter: drop-shadow(0 10px 14px rgba(3, 10, 7, .38));
}
.skg[data-skin="quiet"] .skg-cell { border-radius: 0; }
.skg[data-skin="quiet"] .skg-cell.is-floor {
  background: var(--skg-quiet-floor);
  box-shadow: inset -1px -1px 0 var(--skg-quiet-line);
}
.skg[data-skin="quiet"] .skg-cell.is-floor[data-edge~="n"] {
  box-shadow: inset -1px -1px 0 var(--skg-quiet-line),
              inset 0 calc(var(--skg-cell) * .16) calc(var(--skg-cell) * .12) calc(var(--skg-cell) * -.08) rgba(60, 44, 20, .26);
}
.skg[data-skin="quiet"] .skg-cell.is-floor[data-edge~="w"] {
  box-shadow: inset -1px -1px 0 var(--skg-quiet-line),
              inset calc(var(--skg-cell) * .08) 0 calc(var(--skg-cell) * .1) calc(var(--skg-cell) * -.06) rgba(60, 44, 20, .14);
}
.skg[data-skin="quiet"] .skg-cell.is-floor[data-edge~="n"][data-edge~="w"] {
  box-shadow: inset -1px -1px 0 var(--skg-quiet-line),
              inset 0 calc(var(--skg-cell) * .16) calc(var(--skg-cell) * .12) calc(var(--skg-cell) * -.08) rgba(60, 44, 20, .26),
              inset calc(var(--skg-cell) * .08) 0 calc(var(--skg-cell) * .1) calc(var(--skg-cell) * -.06) rgba(60, 44, 20, .14);
}
/* The floor shading above outranks the tutorial's ring in site.css; this has to outrank the
   most specific of them (n + w). */
.skg[data-skin="quiet"] .skg-cell.is-floor.is-guide-next[data-edge] {
  box-shadow: inset 0 0 0 3px #fff9df, 0 0 0 4px #c6ab50;
}
/* Walls stay flat apart from their edges: any per-cell texture or gradient repeats down a
   wall column as stripes. */
.skg[data-skin="quiet"] .skg-cell.is-wall { background: var(--skg-quiet-wall); box-shadow: none; }
.skg[data-skin="quiet"] .skg-cell.is-wall[data-edge~="s"] {
  background: linear-gradient(var(--skg-quiet-wall) 76%, var(--skg-quiet-face) 76%);
}
.skg[data-skin="quiet"] .skg-cell.is-wall[data-edge~="n"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }

.skg[data-skin="quiet"] .skg-tutorial-legend i.is-player { background-image: var(--skg-art-keeper); }
.skg[data-skin="quiet"] .skg-tutorial-legend i.is-crate { background-image: var(--skg-art-crate); }
.skg[data-skin="quiet"] .skg-tutorial-legend i.is-goal { background-image: var(--skg-art-goal); }

.skg-skin-option[data-skin="quiet"] .skg-skin-preview { gap: 0; overflow: hidden; padding: 0; border-radius: 8px; }
.skg-skin-option[data-skin="quiet"] .skg-skin-chip { border-radius: 0; background-color: var(--skg-quiet-floor); }
.skg-skin-option[data-skin="quiet"] .skg-skin-chip-floor { box-shadow: inset -1px -1px 0 var(--skg-quiet-line); }
.skg-skin-option[data-skin="quiet"] .skg-skin-chip-wall {
  background: linear-gradient(var(--skg-quiet-wall) 76%, var(--skg-quiet-face) 76%);
}
.skg-skin-option[data-skin="quiet"] .skg-skin-chip-goal { background-image: var(--skg-art-goal); background-size: 86%; }
.skg-skin-option[data-skin="quiet"] .skg-skin-chip-crate { background-image: var(--skg-art-crate); background-size: 96%; }
.skg-skin-option[data-skin="quiet"] .skg-skin-chip-keeper { background-image: var(--skg-art-keeper); background-size: 90%; }
.skg-skin-option[data-skin="quiet"] .skg-skin-chip-done { background-image: var(--skg-art-crate-goal); background-size: 98%; }

.skg-result-card .skg-share { margin: 12px 0 2px; }
.skg-result-card .skg-share .btn { min-width: 160px; }