/* Le Déclic — brutalisme Zikof, mobile-first */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #17151f;
  --bg2: #241f33;
  --bg3: #2d2740;
  --primary: #2b2bff;
  --accent: #ffd23f;
  --pink: #ff5da2;
  --text: #fbf2dd;
  --text2: #b9b3c9;
  --correct: #16c08a;
  --wrong: #ff5da2;
  --card: #2d2740;
  --border: #fbf2dd;
}

body {
  font-family: 'Hanken Grotesk', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

body.light-theme {
  --bg: #fbf2dd;
  --bg2: #ffffff;
  --bg3: #fff7e6;
  --text: #17151f;
  --text2: #5a5470;
  --card: #ffffff;
  --border: #17151f;
}

.container {
  width: 100%;
  max-width: 500px;
  padding: 0 16px 24px;
  margin: 0 auto;
}

/* ---- HEADER ---- */
.game-header {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 500px;
  margin: 0 auto;
}
.game-header a {
  color: var(--text2);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.game-header a:hover { color: var(--primary); }
.game-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
}
.theme-toggle {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.theme-toggle:hover { color: var(--accent); }

/* ---- BANNIÈRE SÉRIE LIBRE ---- */
.libre-banner {
  background: var(--accent);
  color: #1a1a1a;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #000;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* ---- ÉNIGME + MIROIR DU CODE ---- */
#enigmeBox {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  box-shadow: 4px 4px 0 #000;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.enigme-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.enigme-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
  font-style: italic;
}
.code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.code-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  white-space: nowrap;
}
.code-mirror { display: flex; gap: 5px; }
.code-cell {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 800;
  background: rgba(255, 210, 63, 0.14);
  border: 2px solid var(--accent);
  border-radius: 7px;
  color: var(--accent);
  text-transform: uppercase;
}
.code-cell.filled { background: var(--accent); color: #1a1a1a; }

/* ---- GRILLE ---- */
#gridBox { margin-bottom: 14px; }
#gridBox.grippe { filter: grayscale(0.4); animation: grippe-shake 0.5s ease; }
@keyframes grippe-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.grid-row { margin-bottom: 10px; }
.row-clue {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 5px;
  padding: 0 2px;
}
.row-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: var(--accent);
  flex-shrink: 0;
}
.clue-text { color: var(--text); font-weight: 500; }
.diff-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid #000;
  background: var(--bg3);
  color: var(--text2);
}
.diff-badge[data-diff="facile"] { background: var(--correct); color: #10221c; }
.diff-badge[data-diff="moyen"] { background: var(--accent); color: #1a1a1a; }
.diff-badge[data-diff="corse"] { background: var(--pink); color: #1a1a1a; }

.row-cells {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 320px;
}

.cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--bg2);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 10px;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.cell.diag { background: rgba(255, 210, 63, 0.14); }
.diag-mark {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
}
.cell.active {
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
  transform: translate(-1px, -1px);
}
.cell.locked {
  background: var(--correct);
  color: #10221c;
  border-color: #000;
  cursor: default;
}
.cell.locked.half { background: var(--accent); color: #1a1a1a; }
.cell.revealed {
  background: var(--bg2);
  color: var(--wrong);
  border-style: dashed;
  cursor: default;
}

/* goupille : la ligne validée « tombe en place » */
.grid-row.won .cell { animation: goupille 0.45s ease; }
.grid-row.won .cell:nth-child(2) { animation-delay: 0.05s; }
.grid-row.won .cell:nth-child(3) { animation-delay: 0.1s; }
.grid-row.won .cell:nth-child(4) { animation-delay: 0.15s; }
.grid-row.won .cell:nth-child(5) { animation-delay: 0.2s; }
@keyframes goupille {
  0% { transform: translateY(0); }
  35% { transform: translateY(-7px); }
  65% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* flash rouge sur ligne fausse */
.grid-row.flash .cell:not(.locked) {
  animation: cell-shake 0.4s ease;
  border-color: var(--wrong);
}
@keyframes cell-shake {
  0%, 100% { transform: translateX(0); background: var(--bg2); }
  25% { transform: translateX(-4px); background: rgba(255, 93, 162, 0.35); }
  50% { transform: translateX(4px); background: rgba(255, 93, 162, 0.35); }
  75% { transform: translateX(-2px); }
}

/* ---- BANQUE ---- */
#bankBox {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  box-shadow: 4px 4px 0 #000;
  padding: 12px;
  margin-bottom: 12px;
}
.bank-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.tile {
  position: relative;
  min-width: 44px;
  min-height: 48px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--bg2);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 9px;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
  padding: 4px 6px 10px;
  transition: transform 0.08s, opacity 0.15s;
}
.tile:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 #000; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover:not(:disabled) { background: var(--bg3); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
}
.tile:disabled { opacity: 0.3; cursor: default; }
.tile-count {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
}
.tile-value {
  position: absolute;
  bottom: 1px;
  right: 4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text2);
}
.bank-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.action-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 10px;
  border: 2px solid #000;
  background: var(--accent);
  color: #1a1a1a;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.15s;
  min-height: 44px;
}
.action-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.action-btn:disabled { opacity: 0.35; cursor: default; }
.erase-btn { background: var(--bg2); color: var(--text); border-color: var(--border); }

/* ---- STATUS BAR ---- */
#statusBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 14px;
}
.errors-display { color: var(--text2); }
.malus-display { color: var(--wrong); font-size: 13px; }
.score-display {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
}
.chrono-display {
  font-variant-numeric: tabular-nums;
  color: var(--text2);
}

/* ---- END SCREEN ---- */
.end-screen {
  display: none;
  text-align: center;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  box-shadow: 4px 4px 0 #000;
  padding: 20px 16px 24px;
  margin-bottom: 16px;
}
.end-screen.show { display: block; animation: end-in 0.3s ease; }
@keyframes end-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.lock-anim {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 6px;
  display: inline-block;
  animation: lock-pop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.lock-anim.grippe { animation: grippe-shake 0.6s ease; filter: grayscale(0.5); }
@keyframes lock-pop {
  0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.end-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 10px;
}
.perfect-badge {
  display: inline-block;
  background: var(--accent);
  color: #1a1a1a;
  border: 2px solid #000;
  border-radius: 99px;
  box-shadow: 2px 2px 0 #000;
  font-weight: 800;
  font-size: 13px;
  padding: 5px 14px;
  margin-bottom: 12px;
}
.perfect-badge[hidden] { display: none; }
.end-score {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
}
.end-max { font-size: 14px; color: var(--text2); margin-bottom: 8px; }
.end-breakdown { font-size: 12px; color: var(--text2); margin-bottom: 16px; }
.enigme-reveal {
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 18px;
}
.reveal-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.reveal-enigme { font-size: 14px; font-style: italic; margin-bottom: 8px; }
.reveal-code {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 8px;
  color: var(--accent);
}
.end-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.share-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 32px;
  border-radius: 12px;
  border: 2px solid #000;
  background: var(--pink);
  color: #1a1a1a;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 4px 4px 0 #000;
}
.share-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; }
.share-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.share-btn.secondary { background: var(--bg2); color: var(--text); border-color: var(--border); }
.share-btn[hidden] { display: none; }
.copied-toast { display: none; margin-top: 12px; font-size: 13px; color: var(--correct); }
.copied-toast.show { display: block; animation: fade-in 0.3s; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* erreur de chargement */
.load-error {
  text-align: center;
  color: var(--wrong);
  font-weight: 700;
  padding: 24px 0;
}

/* ---- ≥ 380px : cases un peu plus grandes ---- */
@media (min-width: 380px) {
  .row-cells { max-width: 340px; }
  .code-cell { width: 34px; height: 34px; }
}

/* ---- DESKTOP : on agrandit tout à partir des tablettes/ordinateurs ---- */
@media (min-width: 720px) {
  .container,
  .game-header { max-width: 680px; }

  /* Grille plus grande : cases ~70px (grille + banque visibles ensemble) */
  .row-cells { max-width: 400px; gap: 9px; }
  .cell { font-size: 30px; border-radius: 14px; box-shadow: 4px 4px 0 #000; }
  .cell.active { box-shadow: 4px 4px 0 var(--accent); }
  .diag-mark { font-size: 12px; top: 3px; right: 5px; }

  /* Définitions plus lisibles */
  .clue-text { font-size: 16px; }
  .row-num { font-size: 18px; }

  /* Énigme + miroir du code */
  .enigme-box { padding: 22px; }
  .enigme-text { font-size: 22px; }
  .code-cell { width: 42px; height: 42px; font-size: 20px; }

  /* Banque de lettres plus grande */
  .bank-tiles { gap: 9px; }
  .tile { min-width: 54px; min-height: 54px; font-size: 24px; }
  .tile-count { font-size: 11px; }
  .tile-value { font-size: 11px; }
  .bank-actions button { font-size: 17px; padding: 12px 20px; }

  /* Barre de statut */
  .status-bar { font-size: 18px; }
}

/* Grand écran : un cran de plus (mesuré pour rester compact verticalement) */
@media (min-width: 1000px) {
  .container,
  .game-header { max-width: 720px; }
  .row-cells { max-width: 440px; }
  .cell { font-size: 33px; }
}

/* Keep the selected definition and letter bank within reach. */
.active-clue{font-size:13px;font-weight:600;line-height:1.35;margin-bottom:10px}
.resume-notice{font-size:12px;line-height:1.4;color:var(--text2);margin:10px 0}.resume-notice[hidden],.daily-btn[hidden]{display:none}
.daily-btn{font-size:12px;margin-bottom:12px}
#validateBtn{background:var(--correct)}
#bankBox #statusBar{font-size:12px;margin:10px 0 0;padding:5px 0 0;border-top:1px solid var(--text2)}
.cell{scroll-margin-top:85px;scroll-margin-bottom:calc(var(--bank-height,270px) + 20px)}
@media(min-width:720px){
 .container{max-width:1080px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}
 #bankBox{position:sticky;top:80px}.row-cells{max-width:400px}.bank-tiles{gap:6px}.tile{min-width:44px;min-height:48px;font-size:20px}
 .bank-actions{flex-wrap:wrap;gap:8px}.bank-actions button{font-size:14px;padding:10px 12px}#validateBtn{width:100%}
 .cell{scroll-margin-bottom:20px}
}
@media(max-width:719px){
 .container{padding-bottom:calc(var(--bank-height,270px) + 35px)}
 #bankBox{position:fixed;z-index:100;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;margin:0;border-radius:16px 16px 0 0;padding:9px 12px max(10px,env(safe-area-inset-bottom));box-shadow:0 -4px 18px #0007}
 .active-clue{font-size:12px;max-height:49px;overflow:auto;margin-bottom:7px}
 .bank-tiles{gap:4px;margin-bottom:8px}.tile{min-width:40px;min-height:44px;font-size:18px;padding:3px 5px 8px}
 .bank-actions{gap:6px}.bank-actions button{font-size:12px;padding:8px 10px;min-height:44px}
 #bankBox #statusBar{margin-top:6px}.score-display{font-size:14px}.malus-display{font-size:11px}
 .game-finished #bankBox{position:static;transform:none;max-width:none;border-radius:14px}
 .game-finished .container{padding-bottom:24px}
}
button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}