/* Word Square — word search grid game styles */
.wsq-shell { width: 100%; max-width: 460px; margin: 0 auto; }

.wsq-h { text-align: center; font-size: 26px; font-weight: 900; margin: 6px 0 4px;
  color: var(--neon); text-shadow: 0 0 14px rgba(0,245,212,.4); }
.wsq-sub { text-align: center; color: var(--muted); margin: 0 0 18px; font-size: 15px; }

/* Setup panel */
.wsq-setup { padding: 16px 8px 8px; }

/* Preview board shown before the game starts (inert, dimmed) */
.wsq-preview-wrap { margin: 6px auto 20px; opacity: .72; pointer-events: none; }
.wsq-preview-wrap .wsq-tile { cursor: default; }
#preview-board .wsq-tile { color: var(--muted); }
.wsq-opt-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 22px; }
.wsq-opt-lbl { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.wsq-seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px; gap: 4px; }
.wsq-seg-btn { background: none; border: none; color: var(--muted); font-family: inherit;
  font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 9px; cursor: pointer;
  touch-action: manipulation; transition: background .12s, color .12s; }
.wsq-seg-btn.active { background: var(--neon3); color: #fff; box-shadow: 0 0 14px rgba(123,92,255,.5); }
.wsq-start { width: 100%; }
.wsq-loading { text-align: center; color: var(--muted); margin-top: 14px; font-size: 14px; }

/* HUD */
.wsq-hud { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.wsq-hud .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.wsq-val { font-size: 26px; font-weight: 900; line-height: 1.1; }
.wsq-val.big { font-size: 34px; }
#timer.low { color: var(--neon2); text-shadow: 0 0 12px rgba(255,46,151,.5); }

/* Current word readout */
.wsq-current { min-height: 40px; text-align: center; font-size: 26px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; color: var(--text);
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; transition: color .1s; }
.wsq-current.good { color: var(--neon); text-shadow: 0 0 14px rgba(0,245,212,.5); }
.wsq-current.dupe { color: var(--warn); }
.wsq-current.bad { color: var(--neon2); }

/* Board + line overlay */
.wsq-board-wrap { position: relative; width: 100%; aspect-ratio: 1/1; margin: 0 auto; touch-action: none; }
.wsq-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.wsq-board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(4,1fr); gap: 8px; z-index: 1; }
.wsq-tile { display: flex; align-items: center; justify-content: center; background: var(--panel);
  border: 2px solid var(--border); border-radius: 14px; font-size: 30px; font-weight: 900;
  text-transform: uppercase; user-select: none; -webkit-user-select: none; cursor: pointer;
  transition: transform .08s, border-color .1s, background .1s; position: relative; }
.wsq-tile .sub { position: absolute; bottom: 4px; right: 7px; font-size: 12px; color: var(--muted);
  font-weight: 700; }
.wsq-tile.sel { border-color: var(--neon); background: #12324a; color: var(--neon);
  transform: scale(1.06); box-shadow: 0 0 16px rgba(0,245,212,.35); }
.wsq-tile.head { border-color: var(--neon2); box-shadow: 0 0 18px rgba(255,46,151,.5); }
.wsq-tile.flash-good { animation: wsqGood .45s ease; }
@keyframes wsqGood { 0%{background:#12324a} 50%{background:#0e5c3f;border-color:var(--neon)} 100%{background:var(--panel)} }

/* Messages */
.wsq-msg { text-align: center; color: var(--muted); min-height: 22px; margin: 10px 0 6px; font-size: 14px; }

/* Found words */
.wsq-found-wrap { margin-top: 10px; }
.wsq-found-title { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.wsq-found { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow-y: auto; }
.wsq-chip { background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
  padding: 3px 11px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.wsq-chip .pts { color: var(--neon); margin-left: 5px; font-size: 11px; }

/* Game over */
.wsq-over { padding: 20px 8px; text-align: center; }
.wsq-final { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 14px 0 18px; }
.wsq-final .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.wsq-over-found { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 160px;
  overflow-y: auto; margin-bottom: 18px; }
.wsq-over .gbtn { margin: 4px; }

@media (max-width: 420px) {
  .wsq-tile { font-size: 26px; border-radius: 12px; }
  .wsq-val { font-size: 22px; }
}