.morpion-wrap{
  width:100%;
  display:grid;
  gap:18px;
  justify-items:center;
}

.morpion-top,
.morpion-score,
.morpion-actions{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.morpion-modes,
.morpion-options{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.morpion-mode,
.morpion-btn,
.morpion-options select{
  border:3px solid var(--line);
  border-radius:14px;
  background:white;
  color:var(--line);
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
}

.morpion-mode.active{
  background:#ffd32a;
}

.morpion-mode.disabled{
  opacity:.55;
  cursor:not-allowed;
}

.morpion-options label{
  font-weight:900;
  text-transform:uppercase;
}

.morpion-btn.primary{
  background:#2ed573;
}

.morpion-btn.danger{
  background:#ff4757;
  color:white;
}

.morpion-pill{
  background:white;
  border:3px solid var(--line);
  border-radius:14px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  font-weight:900;
}

.morpion-message{
  width:min(100%,640px);
  min-height:52px;
  text-align:center;
  font-size:1rem;
  font-weight:900;
  color:#111;
  background:#fffa85;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.morpion-board{
  width:min(86vw,430px);
  aspect-ratio:1 / 1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:12px;
  padding:16px;
  background:#7ed6df;
  border:5px solid var(--line);
  border-radius:28px;
  box-shadow:8px 8px 0 var(--line);
}

.morpion-cell{
  border:4px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:5px 5px 0 rgba(0,0,0,.65);
  font-size:clamp(3rem,14vw,5.5rem);
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111;
  transition:.12s ease;
}

.morpion-cell:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 rgba(0,0,0,.65);
}

.morpion-cell.x{
  background:#fffa85;
  color:#111;
}

.morpion-cell.o{
  background:#ff9ff3;
  color:#111;
}

.morpion-cell.win{
  background:#2ed573;
  animation:morpionWin .35s ease-in-out infinite alternate;
}

.morpion-cell:disabled{
  cursor:default;
}

@keyframes morpionWin{
  from{transform:scale(1)}
  to{transform:scale(1.06)}
}

.game-frame{
  padding:14px !important;
}

@media(max-width:560px){
  .morpion-board{
    gap:8px;
    padding:10px;
    border-radius:20px;
  }

  .morpion-cell{
    border-radius:16px;
    border-width:3px;
  }
}

/* Correction : cases stables, même avec X ou O */
.morpion-board{
  align-items:stretch;
  justify-items:stretch;
}

.morpion-cell{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  aspect-ratio:1 / 1;
  line-height:1;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  overflow:hidden;
}

.morpion-cell.x,
.morpion-cell.o,
.morpion-cell.win{
  width:100%;
  height:100%;
}

.morpion-cell:focus{
  outline:none;
}

.morpion-cell:focus-visible{
  outline:4px solid #ffd32a;
  outline-offset:-6px;
}

/* Bouton Ami connecté - Morpion */
.morpion-friend-button{
  opacity:1 !important;
  cursor:pointer !important;
  color:#111 !important;
  background:#2ed573 !important;
}

.morpion-friend-panel{
  display:none;
  width:100%;
  margin-top:10px;
  background:#fff;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:5px 5px 0 var(--line);
  padding:12px;
  box-sizing:border-box;
}

.morpion-friend-panel.open{
  display:grid;
  gap:10px;
}

.morpion-friend-title{
  font-weight:900;
  text-transform:uppercase;
  background:#ffd32a;
  border:2px solid var(--line);
  border-radius:10px;
  box-shadow:3px 3px 0 var(--line);
  padding:7px 10px;
  width:max-content;
}

.morpion-friend-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  background:#fff8e7;
  border:2px solid var(--line);
  border-radius:12px;
  padding:10px;
}

.morpion-friend-row strong{
  display:block;
  font-weight:900;
}

.morpion-friend-row small{
  display:block;
  margin-top:2px;
  font-weight:800;
  color:#555;
}

.morpion-friend-row button{
  background:#2ed573;
  color:#111;
  border:2px solid var(--line);
  border-radius:10px;
  box-shadow:3px 3px 0 var(--line);
  padding:7px 10px;
  font-weight:900;
  cursor:pointer;
}

.morpion-friend-row button:disabled{
  opacity:.7;
  cursor:default;
}

.morpion-friend-empty,
.morpion-friend-error{
  background:#f7f7f7;
  border:2px dashed var(--line);
  border-radius:12px;
  padding:10px;
  font-weight:900;
  color:#555;
}

.morpion-friend-error{
  border-style:solid;
  background:#ffe8e8;
  color:#8b0000;
}