/* Fléchoria 3.0.2 — additive visual layer; load after enhancements.css.
   Deliberately leaves workspace/board geometry and print styles untouched. */
@media screen {
  :root {
    --ux-ink: #28392f;
    --ux-paper: #f6f2e9;
    --ux-cream: #fffdf7;
    --ux-terra: #a6442e;
    --ux-sage: #e5e8dc;
    --ux-ochre: #755619;
    --ux-plum: #63446b;
  }
  /* A two-tone ring remains visible on both the pale page and dark panel. */
  :where(a,button,input,select,summary,[tabindex]):focus-visible {
    outline: 3px solid var(--ux-ink);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--ux-cream);
  }
  .clue-panel :where(a,button,input,select,[tabindex]):focus-visible {
    outline-color: var(--ux-cream);
    box-shadow: 0 0 0 3px var(--ux-ink);
  }
  .button,.text-button,.key,.direction,.word-navigation .button {
    min-height:44px; min-width:44px;
  }
  .site-header nav a,.site-footer nav a {
    min-height:44px; display:inline-flex; align-items:center;
  }
  .level-paths a { border-bottom:3px solid var(--ux-ink); }
  .level-paths small {font-size:.75rem;line-height:1.4;color:var(--ux-ink);}
  .level-paths a[data-level="moyen"] {border-bottom-color:var(--ux-ochre);}
  .level-paths a[data-level="difficile"] {border-bottom-color:var(--ux-terra);}
  .level-paths a[data-level="expert"] {border-bottom-color:var(--ux-plum);}
  .grid-card {border-top:4px solid var(--ux-ink);box-shadow:0 3px 0 #28392f08;}
  .grid-card[data-level="moyen"] {border-top-color:var(--ux-ochre);}
  .grid-card[data-level="difficile"] {border-top-color:var(--ux-terra);}
  .grid-card[data-level="expert"] {border-top-color:var(--ux-plum);}
  .grid-card:focus-within {border-inline-color:var(--ux-ink);}
  .card-top {gap:8px;flex-wrap:wrap;}
  .level {font-size:.75rem;line-height:1.4;color:var(--ux-ink);}
  .level[data-level="facile"] {background:var(--ux-sage);color:var(--ux-ink);}
  .level[data-level="moyen"] {background:#eee4cd;color:var(--ux-ochre);}
  .level[data-level="difficile"] {background:#f2e1d5;color:var(--ux-terra);}
  .level[data-level="expert"] {background:#e7e0eb;color:var(--ux-plum);}
  .card-number {font-size:.7rem;letter-spacing:.06em;}
  .card-note {font-size:.75rem;line-height:1.5;}
  .card-bottom .button {white-space:normal;text-align:center;}
  .daily {border-radius:14px;border-inline-start:4px solid var(--ux-ink);}
  .daily .eyebrow {color:var(--ux-ink);letter-spacing:.12em;}
  .daily h3 {line-height:1.2;overflow-wrap:anywhere;}
  .filters {padding-block:16px;border-block:1px solid var(--line);}
  .filters label {font-size:.85rem;}
  .filters input,.filters select {font-size:1rem;min-height:46px;}
  /* Cells retain the original --cell and scrollable board. Long/twin clues
     still use the full selected definition panel, not an overlaid tooltip. */
  .clue-button {font-size:clamp(10.5px,calc(var(--cell)*.145),13px);line-height:1.2;font-weight:600;}
  .clue-button.active {background:#cfdbc2;box-shadow:inset 3px 0 0 var(--ux-ink);}
  .clue-button:focus-visible {outline-offset:-3px;box-shadow:none;}
  .clue-arrow {color:var(--ux-ink);}
  .clue-panel {box-shadow:inset 0 0 0 1px #66775f;}
  #active-clue {overflow-wrap:anywhere;hyphens:auto;}
  .clue-panel .muted {color:var(--ux-sage);}
  .direction[aria-pressed="true"] {border-color:var(--ux-cream);font-weight:750;}
  .word-navigation {flex-wrap:wrap;}
  .word-navigation .button {white-space:normal;}
  .board-scroll {overscroll-behavior:contain;}
  /* No sticky/fixed positioning, no workspace dimensions, no z-index. */
  .completion {border-radius:16px;border-color:#66775f;background:var(--ux-sage);}
  .completion > img {max-width:100%;height:auto;}
  .completion:not([hidden]) {animation:ux302-arrive 480ms cubic-bezier(.2,.75,.25,1) both;}
  .completion:not([hidden]) > img {animation:ux302-seal 650ms cubic-bezier(.2,.75,.25,1) both;}
  @keyframes ux302-arrive {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes ux302-seal {0%{opacity:0;transform:scale(.9) rotate(-5deg)}70%{opacity:1;transform:scale(1.025) rotate(1deg)}100%{opacity:1;transform:none}}
  @media(max-width:700px) {
    .hero {gap:16px;}
    .hero .hero-title {font-size:clamp(3.2rem,12.5vw,4.2rem);}
    .hero-art {display:block;max-width:360px;width:100%;margin:0 auto;}
    .hero-art picture {display:block;}
    .hero-art img {display:block;width:100%;height:auto;aspect-ratio:360/156;object-fit:contain;}
    .art-caption {font-size:.625rem;letter-spacing:.14em;margin-top:6px;}
    .level-paths a {gap:6px;padding:12px 8px;}
    .level-paths img {width:36%;}
    .level-paths span {font-size:1rem;}
    .level-paths small {margin-top:4px;}
    .daily {gap:12px;}
    .daily h3 {font-size:1.5rem;}
    .card-bottom {align-items:stretch;}
    .card-bottom .button {width:100%;}
    .grid-card h3 {font-size:1.35rem;}
    .completion {padding:24px 16px;}
  }
  /* Keep the existing small-height workspace precedence intact. In its
     bounded clue area only improve text: do not raise its height or padding. */
  @media(max-width:700px) and (min-height:621px) {
    .play-workspace #active-clue {font-size:1.125rem;line-height:1.35;}
  }
  @media(prefers-reduced-motion:reduce) {
    .completion:not([hidden]),.completion:not([hidden]) > img {animation:none;transform:none;}
    .grid-card,.level-paths a {transition:none;}
    .grid-card:hover,.level-paths a:hover {transform:none;}
  }
}