/* Filippine: rows of squares shifted around one framed column (the key word), the clues beside (below on a phone). */
.sp-board--filippine { padding: 22px; }
.fp-loading { margin: 0; padding: 40px 0; text-align: center; font-size: 18px; color: #4b5563; }
.fp { display: grid; grid-template-columns: minmax(0, 560px) minmax(240px, 380px); gap: 32px; justify-content: center; align-items: start; }

.fp-gridbox { container-type: inline-size; scroll-margin-top: 12px; }
.fp-grid { display: grid; grid-template-columns: minmax(0, .6fr) repeat(var(--cols), minmax(0, 1fr)); width: 100%; max-width: calc(var(--cols) * 54px + 32px); margin: 0 auto; }
.fp-no { display: grid; place-items: center end; padding-right: 4px; font: 700 14px/1 Inter, system-ui, sans-serif; font-size: min(17px, calc(100cqi / var(--cols) * .42)); color: #6b7280; }
.fp-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin: 0 -1px -1px 0; border: 1.5px solid #4b5563; background: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-cell--none { border-color: transparent; background: none; cursor: default; }
.fp-letter { font: 700 22px/1 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: min(28px, calc(100cqi / var(--cols) * .55)); color: #1f2937; }
.fp-num { position: absolute; top: 1px; left: 2px; font: 600 10px/1 Inter, system-ui, sans-serif; font-size: max(9px, min(12px, calc(100cqi / var(--cols) * .26))); color: #6b7280; }
/* The key column: shaded, with a thick frame around the whole column. */
.fp-cell.is-key { background: #eef4f0; border-left: 3px solid #2f5d45; border-right: 3px solid #2f5d45; z-index: 1; }
.fp-cell.is-key-first { border-top: 3px solid #2f5d45; }
.fp-cell.is-key-last { border-bottom: 3px solid #2f5d45; }
.fp-cell.is-row { background: #fdf6d8; }
.fp-cell.is-key.is-row { background: #f6ecbd; }
.fp-cell.is-twin { background: #e3eefb; }
.fp-cell.is-cursor { background: #f7d65a; }
.fp-cell.is-shown .fp-letter { color: #2f5d45; }
.fp-cell.is-wrong .fp-letter { color: #b42318; }
.fp-cell.is-wrong { background: #fde8e6; }
.fp.is-over .fp-cell { cursor: default; }
.fp.is-over .fp-cell.is-key { background: #d8eadf; }

.fp-clue { min-height: 3.2em; margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #fbf9f4; box-shadow: inset 0 0 0 1.5px #ece7da; font-size: 18px; line-height: 1.35; color: #1f2937; }
.fp-clue__label { font-weight: 800; color: #2f5d45; }
.fp-key-word { margin: 12px 0 0; font-size: 19px; color: #1f2937; }
.fp-key-word strong { letter-spacing: .08em; color: #2f5d45; }

.fp-keys { display: grid; gap: 6px; margin-top: 12px; }
.fp-keys__row { display: flex; justify-content: center; gap: 4px; }
.fp-key { flex: 1 1 0; max-width: 46px; min-width: 0; height: 48px; padding: 0; border: 0; border-radius: 8px; background: #e7ece8; font: 700 18px/1 Inter, system-ui, sans-serif; color: #1f2937; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fp-key:active { background: #2f5d45; color: #fff; }
.fp-key--wide { flex: 1.6 1 0; max-width: 74px; }
.fp-key:disabled { opacity: .45; }


.fp-lists { min-width: 0; }
.fp-lists__title { margin: 0 0 10px; font: 700 24px/1.2 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.fp-items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fp-item { display: grid; grid-template-columns: 30px 1fr; gap: 8px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: #fbf9f4; text-align: left; font: 400 17px/1.35 Inter, system-ui, sans-serif; color: #1f2937; cursor: pointer; }
.fp-item__no { font-weight: 800; color: #2f5d45; }
.fp-item__len { color: #6b7280; white-space: nowrap; }
.fp-item__answer { font-weight: 700; color: #2f5d45; }
.fp-item.is-now { background: #fdf0b8; box-shadow: inset 0 0 0 2px #d4a106; }
.fp-item.is-filled:not(.is-now) { color: #6b7280; }
.fp-item:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

@media (max-width: 900px) {
  .fp { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 20px; }
}
@media (max-width: 760px) {
  .sp-board--filippine { padding: 10px; }
  .fp { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fp-play { max-width: 560px; width: 100%; margin: 0 auto; }
  .fp-lists__title { font-size: 21px; }
  .fp-clue { font-size: 17px; }
}
@media (max-width: 400px) {
  .sp-board--filippine { padding: 6px; }
  .fp-keys__row { gap: 3px; }
  .fp-key { height: 46px; font-size: 17px; }
  .fp-item { grid-template-columns: 24px 1fr; padding: 8px; font-size: 16.5px; }
}
.fp.is-over .fp-keys { display: none; }

/* The key column once it is filled in right: a green column, the key word said under the diagram. */
.fp.is-key-right .fp-cell.is-key { background: #cfe8d7; }

/* Larger text: larger clue, list and keys; the diagram may grow wider. */
.sp--large .fp { grid-template-columns: minmax(0, 620px) minmax(260px, 400px); }
.sp--large .fp-grid { max-width: calc(var(--cols) * 62px + 36px); }
.sp--large .fp-letter { font-size: min(32px, calc(100cqi / var(--cols) * .6)); }
.sp--large .fp-clue, .sp--large .fp-key-word { font-size: 21px; }
.sp--large .fp-item { font-size: 19.5px; }
.sp--large .fp-key { height: 54px; font-size: 21px; }
@media (max-width: 760px) {
  .sp--large .fp { grid-template-columns: minmax(0, 1fr); }
  .sp--large .fp-clue { font-size: 19px; }
  .sp--large .fp-key { height: 50px; font-size: 20px; }
}

/* More contrast. */
.sp--contrast .fp-cell:not(.fp-cell--none) { border-color: #000; }
.sp--contrast .fp-cell.is-key { border-left-color: #000; border-right-color: #000; }
.sp--contrast .fp-cell.is-key-first { border-top-color: #000; }
.sp--contrast .fp-cell.is-key-last { border-bottom-color: #000; }
.sp--contrast .fp-letter, .sp--contrast .fp-num, .sp--contrast .fp-no { color: #000; }
.sp--contrast .fp-cell.is-row { background: #fde68a; }
.sp--contrast .fp-cell.is-cursor { background: #f59e0b; }
.sp--contrast .fp-cell.is-twin { background: #bfdbfe; }
.sp--contrast .fp-cell.is-wrong .fp-letter { color: #b00020; }
.sp--contrast .fp-clue { background: #fff; box-shadow: inset 0 0 0 2px #1f2937; color: #000; }
.sp--contrast .fp-key { background: #fff; box-shadow: inset 0 0 0 1.5px #1f2937; color: #000; }
.sp--contrast .fp-item { background: #fff; box-shadow: inset 0 0 0 1.5px #9ca3af; color: #000; }
.sp--contrast .fp-item.is-filled:not(.is-now) { color: #374151; }
.sp--contrast .fp-item__len { color: #374151; }