:root { color-scheme: dark; --tile: #3d7c6e; --warm: #ffd166; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 18px; font-family: system-ui, sans-serif; color: #f7fbf9; background: radial-gradient(circle at top, #284f49, #102521 65%); }
main { width: min(94vw, 560px); text-align: center; }
h1 { font-size: clamp(1.5rem, 5vw, 2.25rem); margin: 0 0 .35rem; }
.intro { margin: 0 0 1rem; color: #cfe0d9; }
#board { width: min(94vw, 520px); aspect-ratio: 1; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 4px; border: 4px solid #d6a346; border-radius: 13px; background: #142f2a; box-shadow: 0 12px 35px #0008; }
.piece { border: 0; border-radius: 7px; background-color: var(--tile); background-repeat: no-repeat; cursor: pointer; transition: transform .12s, filter .12s; touch-action: manipulation; }
.piece:hover, .piece:focus-visible { filter: brightness(1.17); transform: scale(.975); outline: 3px solid var(--warm); outline-offset: -3px; }
.empty { cursor: default; background: #0b1d1a; box-shadow: inset 0 0 18px #0008; }
.empty:hover { transform: none; filter: none; outline: 0; }
.stats { display: flex; justify-content: center; gap: 22px; margin: 15px 0; font-weight: 700; }
.stats span { color: var(--warm); }
.controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
button.control { padding: .72rem 1rem; border: 0; border-radius: 9px; font: inherit; font-weight: 700; color: #102521; background: #ffd166; cursor: pointer; touch-action: manipulation; }
button.control.secondary { color: #fff; background: #367b6d; }
#message { min-height: 1.8em; margin: 14px 0 0; font-weight: 650; color: #d7f4c7; }
.hint { color: #b7ccc4; font-size: .9rem; margin: .8rem 0 0; }
/* L'aperçu doit réellement aider à reconstruire l'image, y compris sur téléphone. */
#preview { width: min(90vw, 520px); aspect-ratio: 1; height: auto; margin: 16px auto 0; border: 3px solid #d6a346; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 8px 24px #0007; }
.credit { margin: .55rem auto 0; max-width: 520px; color: #cfe0d9; font-size: .82rem; }
.credit a { color: var(--warm); }