.logic-page{display:grid;gap:20px}
.logic-hero,.logic-toolbar,.logic-game-card{background:#fff;border:4px solid var(--line);border-radius:26px;box-shadow:8px 8px 0 var(--line)}
.logic-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:20px;align-items:stretch;background:radial-gradient(circle at top left,rgba(255,211,42,.45),transparent 34%),linear-gradient(135deg,#fff,#fff8e7);padding:24px}
.logic-kicker{display:inline-flex;width:max-content;background:#ffd32a;color:#111;border:3px solid var(--line);border-radius:999px;box-shadow:4px 4px 0 var(--line);padding:7px 12px;font-weight:1000;text-transform:uppercase;font-size:.78rem}
.logic-hero h2{margin:14px 0 8px;font-size:clamp(2rem,4vw,3.6rem);line-height:.95;font-weight:1000;letter-spacing:-.04em}
.logic-hero p{margin:0;max-width:760px;font-size:1.05rem;font-weight:800;color:#333;line-height:1.55}
.logic-rules{display:grid;gap:10px;background:#111;color:#fff;border:4px solid var(--line);border-radius:22px;box-shadow:6px 6px 0 var(--line);padding:18px;align-content:center}
.logic-rules strong{text-transform:uppercase;font-size:1.15rem}
.logic-rules span{background:#fff;color:#111;border:2px solid var(--line);border-radius:14px;padding:9px 10px;font-weight:900}
.logic-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;padding:14px}
.logic-toolbar label{display:grid;gap:6px;font-weight:1000}
.logic-toolbar select,.logic-toolbar button{border:4px solid var(--line);border-radius:18px;box-shadow:5px 5px 0 var(--line);padding:12px 16px;font-weight:1000;background:#fff8e7}
.logic-toolbar button{background:#2ed573;color:#111;cursor:pointer}
.logic-game-card{display:grid;gap:16px;padding:18px}
.logic-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.logic-stats div{background:#fff8e7;border:3px solid var(--line);border-radius:18px;box-shadow:4px 4px 0 var(--line);padding:12px;text-align:center;font-weight:900}
.logic-stats strong{display:block;font-size:1.7rem}
.logic-message{background:#fffa85;border:4px solid var(--line);border-radius:20px;box-shadow:5px 5px 0 var(--line);padding:14px;font-weight:900}
.numbers-grid{display:grid;gap:8px;width:max-content;max-width:100%;overflow:auto;background:#111;border:5px solid var(--line);border-radius:26px;box-shadow:8px 8px 0 var(--line);padding:12px}
.num-cell{width:54px;height:54px;border:3px solid var(--line);border-radius:16px;box-shadow:3px 3px 0 var(--line);background:#fff;display:grid;place-items:center;font-weight:1000;font-size:1.25rem;cursor:pointer}
.num-cell.next{background:#ffd32a}
.num-cell.done{background:#2ed573;color:#111}
.num-cell.obstacle{background:#2d3436;color:#fff;cursor:default}
.num-cell.error{background:#ff4757;color:#fff}
@media(max-width:800px){.logic-hero{grid-template-columns:1fr}.logic-stats{grid-template-columns:repeat(2,1fr)}.num-cell{width:42px;height:42px}}

.logic-howto{
  background:#fff;
  border:4px solid var(--line);
  border-radius:26px;
  box-shadow:8px 8px 0 var(--line);
  padding:18px;
}

.logic-howto h3{
  margin:0 0 12px;
  font-size:1.35rem;
  font-weight:1000;
  text-transform:uppercase;
}

.logic-howto ul{
  margin:0;
  padding-left:22px;
  display:grid;
  gap:8px;
}

.logic-howto li{
  font-weight:850;
  line-height:1.45;
}

.logic-howto li::marker{
  font-weight:1000;
}

/* Bloc règles premium cliquable */
.game-rules-accordion.logic-howto{
  background:#fff;
  border:4px solid var(--line);
  border-radius:26px;
  box-shadow:8px 8px 0 var(--line);
  padding:0;
  overflow:hidden;
}

.game-rules-accordion summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  background:
    radial-gradient(circle at top left, rgba(255,211,42,.45), transparent 34%),
    linear-gradient(135deg, #ffffff, #fff8e7);
}

.game-rules-accordion summary::-webkit-details-marker{
  display:none;
}

.game-rules-accordion .rules-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:#ffd32a;
  color:#111;
  border:3px solid var(--line);
  border-radius:14px;
  box-shadow:4px 4px 0 var(--line);
  font-weight:1000;
  font-size:1.3rem;
}

.game-rules-accordion summary strong{
  display:block;
  font-size:1.25rem;
  font-weight:1000;
  text-transform:uppercase;
  line-height:1.1;
}

.game-rules-accordion summary small{
  display:block;
  margin-top:4px;
  color:#444;
  font-weight:850;
}

.game-rules-accordion .rules-chevron{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  background:#111;
  color:#fff;
  border:3px solid var(--line);
  border-radius:999px;
  box-shadow:4px 4px 0 var(--line);
  font-size:1.4rem;
  font-weight:1000;
  transition:transform .18s ease;
}

.game-rules-accordion[open] .rules-chevron{
  transform:rotate(180deg);
}

.game-rules-accordion .logic-howto-content{
  border-top:4px solid var(--line);
  background:#fff;
  padding:18px;
}

.game-rules-accordion ul{
  margin:0;
  padding-left:0;
  display:grid;
  gap:10px;
  list-style:none;
}

.game-rules-accordion li{
  position:relative;
  background:#fff8e7;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:11px 12px 11px 42px;
  font-weight:900;
  line-height:1.45;
}

.game-rules-accordion li::before{
  content:"✓";
  position:absolute;
  left:12px;
  top:10px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  background:#2ed573;
  color:#111;
  border:2px solid var(--line);
  border-radius:999px;
  font-size:.85rem;
  font-weight:1000;
}

.game-rules-accordion[open]{
  animation:rulesOpen .18s ease-out;
}

@keyframes rulesOpen{
  from{transform:translateY(-2px)}
  to{transform:translateY(0)}
}

@media(max-width:520px){
  .game-rules-accordion summary{
    grid-template-columns:auto minmax(0,1fr);
  }

  .game-rules-accordion .rules-chevron{
    grid-column:1 / -1;
    width:100%;
    border-radius:14px;
  }
}