/* Word search pages: washi paper like the rest of the site, and a grid of
   white cells like the sheet. */
:root {
  --ink: #111;
  --muted: #5b5446;
  --paper: #fbf3dc;
  --mark: 31, 160, 221;     /* the answer key's blue */
  /* board width: fits the screen's width, and its height too (so the
     buttons stay in view on a landscape tablet), but never below 300px */
  --bw: min(100vw - 32px, 600px, max(100vh - 250px, 300px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--paper) url("/img/washi.jpg") center / cover fixed;
  color: var(--ink);
  font-family: "Noto Sans", "Noto Sans JP", system-ui, sans-serif;
  text-align: center;
  padding: 20px 16px 40px;
  -webkit-tap-highlight-color: transparent;
}

.ws-title { margin: 0; font-weight: 400; }
.ws-title .k { display: block; font-size: clamp(26px, 7vw, 40px); letter-spacing: .1em; }
.ws-title .b { display: block; font-size: clamp(15px, 4vw, 20px); letter-spacing: .14em; margin-top: 4px; }
.ws-help { max-width: 600px; margin: 12px auto 16px; color: var(--muted); font-size: .95rem; line-height: 1.45; }

.ws-board {
  position: relative;
  width: var(--bw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  aspect-ratio: 1;
  background: #fff;
  border: 2px solid #111;
  touch-action: none;     /* dragging selects letters instead of scrolling */
  user-select: none;
  -webkit-user-select: none;
}
.ws-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  font: 400 calc(var(--bw) / 11 * .48) / 1 "Noto Sans JP", sans-serif;
  cursor: pointer;
}
.ws-cell:nth-child(11n) { border-right: 0; }
.ws-cell:nth-last-child(-n+11) { border-bottom: 0; }
.ws-two { font-size: calc(var(--bw) / 11 * .36); letter-spacing: -.05em; }
.ws-pic { padding: 3%; }
.ws-pic img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ws-pic:focus-visible { outline: 3px solid #111; outline-offset: -3px; }

.ws-cell.is-selected { background: rgba(var(--mark), .25); }
.ws-cell.is-wrong { animation: wrong .45s ease-out; }
@keyframes wrong { 0% { background: rgba(200, 40, 30, .35); } 100% { background: transparent; } }

/* boxes around words, like the answer key: .ws-box covers the run of cells
   exactly (placed by sopa.js), the rounded outline sits just inside it */
.ws-box { position: absolute; pointer-events: none; }
.ws-box::before { content: ""; position: absolute; inset: calc(var(--bw) / 11 * .08); border-radius: calc(var(--bw) / 11 * .3); }
.ws-box--found::before { border: 3px solid rgb(var(--mark)); background: rgba(var(--mark), .1); }
.ws-box--answer::before { border: 2px dashed rgba(0, 0, 0, .45); }

.ws-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 16px 0 8px; }
.ws-bar button {
  font: inherit; font-size: 1rem;
  padding: 10px 18px; border: 0; border-radius: 12px;
  background: #2b2418; color: #fbf1dd; cursor: pointer;
}
.ws-win { margin: 8px 0; font-size: 1.15rem; font-weight: 500; }
.ws-found { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 600px; margin: 8px auto 0; }
.ws-chip {
  font: 400 1.05rem "Noto Sans JP", sans-serif;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgb(var(--mark)); background: rgba(255, 255, 255, .7); color: var(--ink);
}

.name { position: fixed; left: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.name .v { writing-mode: vertical-rl; font: 500 14px/1.15 "Noto Serif JP", serif; }
.name img { width: 24px; }
@media (max-width: 700px) { .name { position: static; flex-direction: row; justify-content: center; margin-top: 24px; } .name .v { writing-mode: horizontal-tb; } }