/* Mots croisés du jour: the grid player, the home page and the other pages of the site.
   Colours: bottle green of the cover, cream paper, terracotta and pale gold of the
   watercolour headers. Loaded on every page of the site (motscroises/page_head.html). */

@font-face {
  font-family: "Newsreader MC";
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson MC";
  src: url("fonts/atkinson-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Caveat MC";
  src: url("fonts/caveat-latin.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --mc-paper: #fbf8ef;
  --mc-card: #ffffff;
  --mc-ink: #1c2420;
  --mc-soft: #3f4a44;
  --mc-muted: #56615a;
  --mc-line: #e3dccb;
  --mc-green: #1f5c46;
  --mc-green-deep: #164534;
  --mc-green-light: #e3efe8;
  --mc-terra: #b5532c;
  --mc-terra-light: #f7e4da;
  --mc-gold: #e6b450;
  --mc-gold-light: #fbf0d4;
  --mc-cta: linear-gradient(90deg, #1f5c46, #2f7a5c);
  --mc-display: "Newsreader MC", Georgia, serif;
  --mc-text: "Atkinson MC", system-ui, sans-serif;
  --mc-script: "Caveat MC", cursive;
}

/* The whole site: paper background, the logo instead of the emoji, readable type. */
body { background: var(--mc-paper); font-family: var(--mc-text); color: var(--mc-ink); font-size: 1.05rem; }
h1, h2, h3, .brand { font-family: var(--mc-display); font-weight: 600; }
.topbar { max-width: 1200px; }
.brand { font-size: 1.3rem; color: var(--mc-ink); }
.brand-emoji { font-size: 0; width: 32px; height: 32px; flex: 0 0 auto; background: url("logo.svg") center / contain no-repeat; }
.topnav a, .footer { color: var(--mc-soft); }
.card { border: 1px solid var(--mc-line); box-shadow: 0 14px 30px rgba(28, 36, 32, 0.07); }
.badge { background: var(--mc-green-light); color: var(--mc-green); }
.offer-price b, .price { font-family: var(--mc-display); font-weight: 600; color: var(--mc-green); }
.btn { border-radius: 999px; }
input[type="text"], input[type="email"], textarea, select { background: #fffef9; border-color: #d9d1bd; font-size: 1.05rem; }

.mc { color: var(--mc-ink); line-height: 1.55; }
.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }
.mc h1, .mc h2, .mc h3 { margin: 0; color: var(--mc-ink); letter-spacing: 0; }
.mc p { margin: 0; }
.mc a { color: var(--mc-green); }
.mc a:hover { color: var(--mc-green-deep); }
.mc img { display: block; max-width: 100%; height: auto; }
.mc a:focus-visible, .mc button:focus-visible, .mc input:focus-visible, .mc textarea:focus-visible { outline: 3px solid var(--mc-gold); outline-offset: 2px; }

.mc-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.mc-hand { font-family: var(--mc-script); font-weight: 700; color: var(--mc-terra); font-size: 1.6rem; line-height: 1.1; }
.mc-accent { color: var(--mc-green); }
.mc-green { color: var(--mc-green); }
.mc-note { font-size: 0.92rem; color: var(--mc-muted); }
.mc-alert { background: var(--mc-terra-light); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }

.mc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--mc-cta); color: #ffffff; font: 700 1.08rem var(--mc-text);
  text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 8px 20px rgba(31, 92, 70, 0.25);
}
.mc a.mc-btn, .mc a.mc-btn:hover, a.mc-btn { color: #ffffff; }
.mc-btn:hover { filter: brightness(1.08); }
.mc-btn.ghost, .mc a.mc-btn.ghost { background: #ffffff; color: var(--mc-green); border: 2px solid var(--mc-green); box-shadow: none; }
.mc-btn.ghost:hover { background: var(--mc-green-light); filter: none; }
.mc-btn[hidden] { display: none; }
.mc-wide { width: 100%; }

.mc-sticker {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #ffffff; color: var(--mc-green); font: 700 0.8rem var(--mc-text);
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(28, 36, 32, 0.15);
}
.mc-paper { display: block; position: relative; background: #ffffff; padding: 8px; border-radius: 6px; box-shadow: 0 18px 40px rgba(28, 36, 32, 0.18); }
.mc-tilt-left { transform: rotate(-1.5deg); }
.mc-tilt-right { transform: rotate(1.5deg); }

/* The top of the home page. */
.mc-hero { position: relative; padding: 28px 0 52px; background: radial-gradient(1000px 460px at 85% 8%, #efe7d2 0%, rgba(239, 231, 210, 0) 60%); }
.mc-hero-grid { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .mc-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } }
.mc-hero-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mc-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.05; }
.mc-lead { font-size: 1.15rem; color: var(--mc-soft); max-width: 580px; }
.mc-form-card { background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 22px; padding: 22px; box-shadow: 0 18px 40px rgba(28, 36, 32, 0.09); }
.mc-form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mc-form-head h2 { font-size: 1.45rem; }
.mc-form { display: flex; flex-direction: column; gap: 12px; }
.mc-form label { font-weight: 700; font-size: 0.98rem; }
.mc-form textarea { width: 100%; font: 1rem/1.45 var(--mc-text); border-radius: 14px; padding: 12px; }
.mc-form input[type="text"] { width: 100%; min-height: 48px; border-radius: 14px; padding: 0 12px; }
.mc-forces { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-forces legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
@media (min-width: 560px) { .mc-forces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mc-pill { position: relative; display: block; cursor: pointer; }
.mc-pill input { position: absolute; opacity: 0; inset: 0; }
.mc-pill span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; justify-content: center; border: 2px solid var(--mc-line); border-radius: 16px; padding: 8px; background: #fffef9; font-size: 0.95rem; }
.mc-pill b { font-size: 1.05rem; }
.mc-pill i { font-style: normal; color: var(--mc-muted); font-size: 0.85rem; }
.mc-pill input:checked + span { border-color: var(--mc-green); background: var(--mc-green-light); color: var(--mc-green-deep); }
.mc-pill input:focus-visible + span { outline: 3px solid var(--mc-gold); outline-offset: 2px; }
.mc-skip { font-weight: 700; }
.mc .mc-skip a { text-decoration: none; }
.mc-hero-figure { margin: 0; position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 470px; justify-self: center; }

.mc-band { background: var(--mc-green-deep); color: #ffffff; padding: 18px 0; }
.mc-band ul { list-style: none; display: grid; gap: 10px; }
@media (min-width: 600px) { .mc-band ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .mc-band ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mc-band strong { color: var(--mc-gold); }

.mc-intro { padding: 56px 18px 10px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.mc-intro h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.mc-intro p { max-width: 720px; color: var(--mc-soft); }

.mc-product { padding: 40px 0; }
.mc-product.alt { background: #f4efe2; }
.mc-product-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .mc-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
@media (max-width: 899px) { .mc-product-grid.reverse .mc-shot { order: -1; } }
.mc-shot { position: relative; max-width: 470px; justify-self: center; width: 100%; }
.mc-pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: end; max-width: 560px; }
.mc-copy { display: flex; flex-direction: column; gap: 14px; }
.mc-copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mc-copy-head h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.mc-price { font-family: var(--mc-display); font-weight: 700; font-size: 1.6rem; color: var(--mc-green); white-space: nowrap; }
.mc-tag { align-self: flex-start; background: var(--mc-gold-light); color: #7a5410; font-weight: 700; font-size: 0.85rem; padding: 5px 12px; border-radius: 999px; }
.mc-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.mc-clue-sample { background: #ffffff; border: 1px dashed var(--mc-line); border-radius: 14px; padding: 12px 14px; }
.mc-clue-sample ul { margin: 6px 0 0; padding-left: 1.1em; }

.mc-more { padding: 44px 0; }
.mc-more-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .mc-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mc-tile { background: #ffffff; border: 1px solid var(--mc-line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mc-tile.warm { background: var(--mc-gold-light); }
.mc-tile-head { display: flex; justify-content: space-between; gap: 10px; }
.mc-links { display: flex; flex-wrap: wrap; gap: 8px; }

.mc-maker-zone { background: #f4efe2; padding: 48px 0; }
.mc-maker-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .mc-maker-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; } }
.mc-maker-grid h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 6px 0 10px; }

.mc-how { padding: 56px 0; }
.mc-how h2 { text-align: center; font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 26px; }
.mc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 860px) { .mc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mc-steps li { background: #ffffff; border: 1px solid var(--mc-line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.mc-step-n { width: 40px; height: 40px; border-radius: 6px; background: var(--mc-green); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font: 700 1.2rem var(--mc-display); }

.mc-trust { background: var(--mc-green-light); padding: 48px 0; }
.mc-trust-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .mc-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.mc-trust h2 { font-size: 1.5rem; margin-bottom: 8px; }
.mc-guides { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mc-guides a { display: inline-block; background: #ffffff; border-radius: 999px; padding: 8px 14px; text-decoration: none; font-weight: 700; }

.mc-faq { padding: 48px 0 64px; }
.mc-faq h2 { font-size: 1.9rem; margin-bottom: 14px; }
.mc-faq details { background: #ffffff; border: 1px solid var(--mc-line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.mc-faq summary { font-weight: 700; cursor: pointer; }
.mc-faq details p { margin-top: 8px; color: var(--mc-soft); }

/* After the free form: the grid, then the gift offer. */
.mc-result-zone { padding-top: 26px; padding-bottom: 26px; }
.mc-res { display: grid; gap: 28px; }
@media (min-width: 1000px) { .mc-res { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: start; } }
.mc-res-play { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mc-res-play h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.mc-res-offer { background: #ffffff; border: 1px solid var(--mc-line); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.mc-res-offer h2 { font-size: 1.5rem; }
.mc-res-picture { position: relative; }
.mc-res-picture img { width: 100%; max-width: 340px; margin: 0 auto; border: 8px solid #ffffff; border-radius: 6px; box-shadow: 0 16px 34px rgba(28, 36, 32, 0.18); }
.mc-compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.mc-compare th, .mc-compare td { padding: 7px 6px; border-bottom: 1px solid var(--mc-line); text-align: left; vertical-align: top; }
.mc-compare .full { color: var(--mc-green-deep); font-weight: 700; }
.mc-res-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-res-facts span { background: var(--mc-green-light); border-radius: 999px; padding: 4px 10px; font-size: 0.82rem; }
.mc-res-small { display: flex; align-items: center; gap: 12px; text-decoration: none; background: #f4efe2; border-radius: 16px; padding: 12px; color: var(--mc-ink); }
.mc-res-small-mark { flex: 0 0 56px; min-width: 56px; height: 56px; border-radius: 10px; background: var(--mc-green); color: #ffffff; display: flex; align-items: center; justify-content: center; font: 700 1.4rem var(--mc-display); }
.mc-res-small > span { flex: 1 1 auto; min-width: 0; }
.mc-other { font-size: 0.95rem; }
.mc-hint { background: var(--mc-gold-light); border-radius: 12px; padding: 10px 12px; font-size: 0.95rem; margin: 12px 0 0; }
.mc-check-row { display: flex; align-items: flex-end; }

/* The grid player. */
.mc-player { position: relative; display: flex; flex-direction: column; gap: 12px; }
.mc-print-head, .mc-print-solution { display: none; }
.mc-bar { position: sticky; top: 0; z-index: 3; display: flex; gap: 12px; align-items: center; background: var(--mc-green-deep); color: #ffffff; border-radius: 12px; padding: 10px 12px; min-height: 48px; }
.mc-bar[hidden] { display: none; }
.mc-clock { font: 700 1rem var(--mc-text); font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 2px 8px; flex: 0 0 auto; }
.mc-current { font-size: 1rem; line-height: 1.3; }
.mc-board {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  width: 100%; max-width: min(100%, calc(var(--cols) * 52px)); background: var(--mc-ink);
  border: 3px solid var(--mc-ink); gap: 2px; user-select: none; touch-action: manipulation;
}
.mc-cell { position: relative; aspect-ratio: 1; background: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mc-cell.mc-black { background: var(--mc-ink); cursor: default; }
.mc-num { position: absolute; top: 1px; left: 3px; font-size: clamp(0.5rem, 1.6vw, 0.72rem); color: var(--mc-muted); line-height: 1; font-weight: 700; }
.mc-letter { font: 700 clamp(0.95rem, 4.4vw, 1.6rem) var(--mc-text); color: var(--mc-ink); text-transform: uppercase; }
.mc-cell.mc-on { background: var(--mc-green-light); }
.mc-cell.mc-active { background: var(--mc-gold); }
.mc-cell.mc-wrong .mc-letter { color: var(--mc-terra); text-decoration: line-through; }
.mc-cell.mc-given .mc-letter { color: var(--mc-green); }
.mc-solved .mc-letter { color: var(--mc-green-deep); }
.mc-input { position: absolute; z-index: 2; opacity: 0; border: 0; padding: 0; font-size: 16px; caret-color: transparent; background: transparent; color: transparent; }
.mc-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-tools[hidden] { display: none; }
.mc-tool { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--mc-green); background: #ffffff; color: var(--mc-green); font: 700 0.95rem var(--mc-text); cursor: pointer; }
.mc-tool:hover { background: var(--mc-green-light); }
.mc-tool-quiet { border-color: var(--mc-line); color: var(--mc-muted); }
.mc-done { background: var(--mc-gold-light); border-radius: 16px; padding: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.mc-done[hidden] { display: none; }
.mc-done-title { font: 700 1.25rem var(--mc-display); }
.mc-clues { display: grid; gap: 18px; }
@media (min-width: 700px) { .mc-clues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mc-clue-list h3 { font-size: 1.15rem; margin-bottom: 6px; color: var(--mc-green); }
.mc-clue-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-clue-list li { padding: 5px 8px; border-radius: 8px; cursor: pointer; line-height: 1.4; }
.mc-clue-list li b { display: inline-block; min-width: 1.6em; color: var(--mc-green); }
.mc-clue-list li.mc-on { background: var(--mc-green-light); }
.mc-len { color: var(--mc-muted); font-size: 0.9em; }
.mc-answer { color: var(--mc-terra); letter-spacing: 0.04em; }
.mc-board.mc-open { background: transparent; border: 0; gap: 0; }
.mc-board.mc-open .mc-cell.mc-black { background: transparent; }
.mc-board.mc-open .mc-cell:not(.mc-black) { box-shadow: inset 0 0 0 1px var(--mc-ink), 0 0 0 1px var(--mc-ink); }
.mc-board.mc-small { max-width: min(100%, calc(var(--cols) * 30px)); }

/* Guide pages: the grid sits right under the introduction. */
.guide .mc-player { margin: 16px 0 24px; }
.guide .mc-form-card, .guide .mc-maker { margin: 16px 0; }

/* Phones: the force choice and its button fit in the first screen. */
@media (max-width: 599px) {
  .mc-hero { padding-top: 12px; }
  .mc-hero-text { gap: 10px; }
  .mc-hand { font-size: 1.3rem; }
  .mc-hero h1 { font-size: 1.95rem; }
  .mc-lead { font-size: 1rem; }
  .mc-form-card { padding: 16px; }
  .mc-form-head h2 { font-size: 1.25rem; }
  .mc-forces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mc-pill span { min-height: 58px; font-size: 0.85rem; padding: 6px 4px; }
  .mc-pill b { font-size: 0.95rem; }
  .mc-hero-figure { max-width: 300px; }
  .mc-wrap { padding: 0 14px; }
  .mc-board { border-width: 2px; gap: 1px; }
}

@media (prefers-reduced-motion: reduce) { .mc-tilt-left, .mc-tilt-right { transform: none; } }

/* Printing: a clean sheet built by the player (title, empty grid, clues, solution of a made grid). */
#mc-print-sheet { display: none; }
@media print {
  body.mc-printing > *:not(#mc-print-sheet) { display: none !important; }
  body.mc-printing #mc-print-sheet { display: block; color: #000000; font: 10.5pt/1.35 Georgia, serif; }
  #mc-print-sheet .mc-print-head { display: block; margin-bottom: 8pt; }
  #mc-print-sheet .mc-print-title { font: 700 18pt Georgia, serif; }
  #mc-print-sheet .mc-print-sub { font-size: 10pt; color: #444444; }
  #mc-print-sheet .mc-board { max-width: 14cm; margin: 0 auto 10pt; }
  #mc-print-sheet .mc-board.mc-small { max-width: 9cm; }
  #mc-print-sheet .mc-num { color: #333333; font-size: 6.5pt; }
  #mc-print-sheet .mc-letter { color: #000000; font-size: 13pt; }
  #mc-print-sheet .mc-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; }
  #mc-print-sheet .mc-clue-list li { padding: 1pt 0; }
  #mc-print-sheet .mc-print-solution { display: block; break-before: page; }
  #mc-print-sheet .mc-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}