/* play.css — shared Sneaky Word Search play view. Namespaced .ssws-* so it can
   drop into the Melting-Mindz page wrapper later without collisions. */
.ssws {
  --ssws-accent: #5a3fa0;
  --ssws-ink: #2c2a3a;
  --ssws-muted: #7b768c;
  --ssws-panel: #fffdf8;
  --ssws-grid: #e7dcc7;
  --ssws-cell: #fffaf0;
  --ssws-ring: #d9ccb4;
  --ssws-font: "Comic Sans MS", "Baloo 2", "Segoe UI Rounded", "Trebuchet MS", system-ui, sans-serif;
  font-family: var(--ssws-font);
  color: var(--ssws-ink);
}
.ssws *, .ssws *::before, .ssws *::after { box-sizing: border-box; }

.ssws-stage { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ssws-boardcard {
  background: var(--ssws-panel); border-radius: 22px; padding: 14px; border: 3px solid #fff;
  box-shadow: 0 10px 30px rgba(60, 42, 10, .12), 0 2px 0 #e9ddc4;
}
.ssws-board { display: block; width: min(86vw, 540px); height: auto; touch-action: none; user-select: none; border-radius: 14px; }
.ssws-side { flex: 1 1 240px; min-width: 230px; }
.ssws-side h2 { font-size: 16px; margin: .2em 0 .6em; color: var(--ssws-muted); letter-spacing: .02em; }

/* clue list = crawlable SEO content AND the interactive word bank */
.ssws-clues { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ssws-clue {
  font-size: 15px; padding: 8px 12px; border-radius: 12px; background: #fff;
  border: 2px solid var(--ssws-ring); position: relative; transition: opacity .2s;
}
.ssws-clue b { font-weight: 800; }
.ssws-clue.found { opacity: .6; }
.ssws-clue.found b { text-decoration: line-through; text-decoration-thickness: 3px; }

.ssws-toolbar { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.ssws-btn {
  font-family: var(--ssws-font); font-weight: 800; font-size: 15px; cursor: pointer; border: none;
  color: #fff; background: linear-gradient(180deg, var(--ssws-accent), #4a3388);
  padding: 10px 16px; border-radius: 14px; box-shadow: 0 4px 0 #3a2870; transition: transform .06s;
}
.ssws-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #3a2870; }
.ssws-btn.ghost { background: #fff; color: var(--ssws-accent); box-shadow: 0 4px 0 #d9ccb4; border: 2px solid var(--ssws-ring); }
.ssws-count { margin-left: auto; align-self: center; color: var(--ssws-muted); font-weight: 800; }

/* scored vs practice indicator */
.ssws-scoreflag { font-weight: 800; font-size: 13px; line-height: 1.25; padding: 7px 12px; border-radius: 10px;
  text-align: center; background: #f0eef4; color: var(--ssws-muted); border: 2px solid var(--ssws-ring); }
.ssws-scoreflag.is-ranked { background: #fff6df; color: #a8710a; border-color: #f4c65a; }

/* svg cells + capsule lasso */
.ssws-cellrect { fill: var(--ssws-cell); stroke: var(--ssws-grid); stroke-width: 1.2; }
.ssws-letter { font-family: var(--ssws-font); font-weight: 800; fill: var(--ssws-ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.ssws-cap { fill: none; stroke-linejoin: round; }
/* animate opacity ONLY — a CSS transform would clobber the SVG rotate() on diagonals */
.ssws-cap.pop { animation: ssws-capin .26s ease-out; }
@keyframes ssws-capin { 0% { opacity: 0; stroke-width: 6; } 100% { opacity: 1; } }
.ssws-cap.miss { animation: ssws-blink .26s ease-out; }
@keyframes ssws-blink { 0%, 100% { opacity: 1; } 45% { opacity: .12; } }
.ssws-ghost { fill: none; stroke: #b9adc9; stroke-dasharray: 5 6; opacity: .9; }

/* win overlay (custom — never a browser dialog) */
.ssws-overlay { position: fixed; inset: 0; background: rgba(44, 42, 58, .55); display: none; align-items: center; justify-content: center; z-index: 40; backdrop-filter: blur(2px); }
.ssws-overlay.show { display: flex; }
.ssws-modal { background: var(--ssws-panel); border-radius: 24px; padding: 26px 30px; text-align: center; border: 4px solid #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); max-width: 340px; animation: ssws-capin .3s; }
.ssws-modal h3 { margin: .1em 0 .3em; font-size: 26px; }
.ssws-modal p { color: var(--ssws-muted); margin: 0 0 16px; }
.ssws-conf { position: fixed; top: -24px; font-size: 22px; z-index: 39; pointer-events: none; animation: ssws-fall linear forwards; }
@keyframes ssws-fall { to { transform: translateY(110vh) rotate(360deg); opacity: .9; } }

/* print / PDF: clean grid + word list on paper, no interactive chrome */
@media print {
  .ssws-toolbar, .ssws-overlay, .ssws-conf { display: none !important; }
  .ssws-boardcard { box-shadow: none; border: 1px solid #ccc; }
  .ssws-clue { border-color: #ccc; opacity: 1 !important; }
  .ssws-clue.found b { text-decoration: none; }
  .ssws-board { width: 60vw; }
}