/* Waffle Crusher stage/difficulty selection UI.
   Include this stylesheet from the HTML. Stage art and difficulty plaques are separate files. */
.wc-selection { color:#f5f7fb; font-family:inherit; }
.wc-selection__heading { margin:0 0 14px; color:#ffc52e; font-weight:950; font-style:italic;
  text-transform:uppercase; letter-spacing:.08em; text-shadow:3px 3px 0 #5b210b; }
.wc-stage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.wc-stage { position:relative; display:block; overflow:hidden; padding:0; width:100%;
  aspect-ratio: 16 / 9; border:2px solid #26384f; border-radius:3px; background:#0b1423;
  cursor:pointer; box-shadow:0 7px 0 #030711, inset 0 0 0 1px #ffffff24;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.wc-stage img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.wc-stage::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,#050914e8 100%); }
.wc-stage__name { position:absolute; z-index:1; left:14px; right:14px; bottom:12px;
  color:#fff; text-align:left; font-weight:950; font-style:italic; font-size:clamp(16px,2vw,26px);
  text-transform:uppercase; letter-spacing:.04em; text-shadow:2px 3px #000; }
.wc-stage:hover img { transform:scale(1.045); }
.wc-stage[aria-pressed="true"] { border-color:#ffc52e; box-shadow:0 0 0 2px #ffc52e,0 0 22px #ffc52e88,0 7px 0 #030711; }
.wc-stage:focus-visible,.wc-difficulty:focus-visible { outline:3px solid #21d1ff; outline-offset:4px; }
.wc-difficulty-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.wc-difficulty { display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer;
  transition:transform .14s ease,filter .14s ease; }
.wc-difficulty img { display:block; width:100%; height:auto; }
.wc-difficulty:hover { transform:translateY(-3px); filter:brightness(1.14); }
.wc-difficulty[aria-pressed="true"] { filter:brightness(1.2) drop-shadow(0 0 10px currentColor); transform:translateY(-2px); }
@media(max-width:720px) {
 .wc-stage-grid { grid-template-columns:1fr; }
 .wc-stage { aspect-ratio:16/8; }
 .wc-difficulty-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) {
 .wc-stage,.wc-stage img,.wc-difficulty { transition:none; }
}