/* Weatherlight: Legacy restoration extras (loaded after oasis.css). */

/* The original tiled background (Images/Back_Weatherlight.gif) was not preserved. */
body { background-color: #e6d6ad; }

.wl-note {
  max-width: 575px; margin: 1em auto; padding: 0.5em 0.8em;
  background: #f6eed6; border: 1px solid #8a6d3b; font-size: 0.95em; text-align: left;
}
.wl-note b:first-child { color: #6b3f12; }

.wl-result { margin: 0.8em auto; padding: 0.5em 0.8em; max-width: 30em; text-align: center; }
.wl-result.right { background: #dfeccf; border: 1px solid #4d7a2a; }
.wl-result.wrong { background: #f3d9cf; border: 1px solid #9b3b23; }
.wl-result small { display: block; margin-top: 0.4em; color: #555; }

.wl-progress { list-style: none; padding: 0; margin: 0.5em 0; display: flex; flex-wrap: wrap; gap: 0.4em 1em; justify-content: center; }
.wl-progress .done::before { content: "\2714\FE0E  "; color: #2f6b12; }
.wl-progress .todo::before { content: "\25CB  "; }
.wl-progress .lost { color: #777; text-decoration: line-through; }

/* Puzzle C reconstruction: a 4x4 lid of stones. */
.rock-grid { display: inline-grid; grid-template-columns: repeat(4, 44px); gap: 6px; padding: 10px;
  background: linear-gradient(135deg, #cfd3d8, #8d939b); border: 3px solid #5a3b1c; border-radius: 4px; }
.rock-grid button, .coin-key span {
  width: 44px; height: 34px; border-radius: 50%; border: 1px solid #0006; padding: 0; cursor: pointer;
  box-shadow: inset -4px -5px 8px #0005, inset 3px 3px 6px #fff6;
}
.rock-grid button.red { background: #b3263a; }
.rock-grid button.blue { background: #2d3fb3; }
.rock-grid button:focus-visible { outline: 3px solid gold; }
.rock-controls { margin: 0.6em 0; }

.coin-key { display: inline-grid; grid-template-columns: repeat(4, 44px); gap: 6px; padding: 10px; background: #5a2a14; }
.coin-key span { cursor: default; border-radius: 50%; width: 40px; height: 40px; }
.coin-key .decorated { background: repeating-radial-gradient(circle, #d9d2b0 0 3px, #8f8763 3px 5px); }
.coin-key .plain { background: #8a8f8a; }

#squee-says { min-height: 6em; padding: 0.6em; background: #f6eed6; border: 1px solid #8a6d3b; font-style: italic; }